Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

nuet

Info Algemeen

Naam
nuet
Aangemeld
Bezoeken
1,863
Laatst Actief
Rollen
Administrator
Punten
101
Badges
5

Posts
879
  • Achtergrondkleur veranderen

    ik denk dat je de blauwe kleur bedoelt waar de slider in staat? Dat is een image, is dus niet gemaakt met css


    Url image: rdesign070.nl/ek/images/banner.jpg

    Als je de kleur hievan wilt veranderen zul je dat met een grafisch programma moeten doen
    (als je me de kleurcode geeft wil ik het wel veranderen voor je en post ik het image als bijlage terug)
    Je zou het evt ook met css kunnen maken maar dat is wat knutselwerk
    Met css3 kun je veel maken. Kijk hier maar wat ze allemaal kunnen maken met css only:
    https://css-tricks.com/examples/ShapesOfCSS/
    Hier heb je zelfs een generator: http://www.samuelrossille.com/css-shape/#y
    carlos
  • Direct wijzigen content site

    ik heb iets gemaakt met Ajax die het tekstbestand iedere keer uitleest na x seconden.
    Zelf kun je de status veranderen met de inputform. De klanten lezen jouw status in beschikbaarheid.html

    Eerst je form waarin je zelf je status kunt wijzigen. De input wordt opgeslagen in status.txt

    input_status.php

    <?php
    error_reporting(E_ALL);
    if($_SERVER['REQUEST_METHOD'] == 'POST')
    {

    $status = $_POST['status'];
    $myfile = fopen('status.txt', 'w') or die('Kan status.txt niet openen!');

    $txt = '';
    $txt .= 'Status: ';
    $txt .= $status;
    $txt .= '<br />';

    $txt .= '<br /><br />';

    fwrite($myfile, $txt);
    fclose($myfile);

    if(fwrite) {
    echo 'Staus veranderd in: <b>'.$status.'</b><br /><br />';
    }
    } // endif

    ?>

    <form name="form1" method="post" action="">
    Vul hieronder je status in: <br />
    Status: <br> <input name="status" type="text" /><br>
    <input type="submit" name="submit" value="Verzenden" />
    </form>

    beschikbaarheid.html

    <script type="text/javascript">

    function Ajax()
    {
    var
    $http,
    $self = arguments.callee;

    if (window.XMLHttpRequest) {
    $http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    try {
    $http = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
    $http = new ActiveXObject('Microsoft.XMLHTTP');
    }
    }

    if ($http) {
    $http.onreadystatechange = function()
    {
    if (/4|^complete$/.test($http.readyState)) {
    document.getElementById('ReloadThis').innerHTML = $http.responseText;
    setTimeout(function(){$self();}, 5000); // 5 sec
    }
    };
    $http.open('GET', 'loadtxt.php' + '?' + new Date().getTime(), true);
    $http.send(null);
    }

    }
    </script>

    <script type="text/javascript">
    setTimeout(function() {Ajax();}, 5000); // 5 sec
    </script>

    <div id="ReloadThis">Default text</div> <!-- dit is je div waarin de status verschijnt -->

    Uitlezen van inhoud status.txt met loadtxt.php

    loadtxt.php

    <?php
    // uitlezen status.txt
    $file = "status.txt";
    $f = fopen($file, "r");
    while ( $line = fgets($f, 5000) ) { // 5 sec
    echo $line;
    }
    ?>

    En als laatste je bestand status.txt is dus gewoon leeg en wordt gevuld met de input die je levert met input_status.php

    Voorbeeld: geef zelf je status weer in: http://webprofis.nl/demo/vd/1/discussievoorbeelden/leh/input_status.php
    Lees direct de verandering in: http://webprofis.nl/demo/vd/1/discussievoorbeelden/leh/beschikbaarheid.html ( na 5 sec)

    Moet alleen nog ff stoeien ermee hoe ik de reload alleen laat plaatsvinden als de inhoud van status.tx is veranderd...
    Leh
  • JS show/hide ipv naar onder naar rechts

    ja de cores files zijn goed maar ik heb ze hierboven in de verkeerde volgorde gezet:
    eerst moet de normale api en daarna pas de ui want de ui is afhankelijk van de andere en die moet dus eerst geladen worden. Dus in deze volgorde in de head zetten:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>;
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>;

    En dan het scriptje onder de html zetten:

    <div id="showmenu">Click Here</div>
    <div class="menu">
    <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
    </ul>
    </div>

    <script>$("#showmenu").click(function () {

    var effect = 'slide'; // slide effect
    var options = { direction: "left" };// van li naar rechts
    var duration = 500;// 1000 = 1 sec

    $('.menu').toggle(effect, duration);
    });</script>

    Toch geef ik persoonlijk ook de voorkeur aan de css versie. Mijn gedachtengang: iets wat je met css kunt bereiken moet je altijd met css proberen te doen tenzij het neit anders gaat en je javascript nodig hebt.
    PatrimuReneV
  • JS show/hide ipv naar onder naar rechts

    ik denk dat je zoiets bedoelt? Van li naar re ipv eronder

    html:

    <div id="showmenu">Click Here</div>
    <div class="menu">
    <ul>
    <li>Button1</li>
    <li>Button2</li>
    <li>Button3</li>
    </ul>
    </div>

    js:

    $("#showmenu").click(function () {

    var effect = 'slide'; // slide effect
    var options = { direction: "left" };// van li naar rechts
    var duration = 500;// 1000 = 1 sec

    $('.menu').toggle(effect, duration);
    });

    css:


    .menu {
    float: left;
    display:none;
    margin-top: -15px;
    }
    #showmenu {
    float: left;
    cursor: pointer;
    }

    http://jsfiddle.net/KFmLv/3131/

    Benodigde api's:

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>;
    Patrimu
  • CSS: menu border rechts verwijderen



    #menu li:last-child {
    border: none;
    }
    Patrimu