Jump to content

paulclift

Members
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

 Content Type 

Posts posted by paulclift

    autocomplete() generating non-text output

    in JavaScript

    Posted

    I have an autocomplete() function connected to a MYSQL database.

    The jquery is completely run of the mill:  

       $(function() {
        $(".choose_venue").autocomplete({
            source: "list_venues.php",
            minLength: 1
            });                
        });

    ...and if I manually add a query such as "list_venues.php?term=Ku" onto the URL of list_venues.php, then that page gives a appropriate response (such as the following):

    [{"name":"Fonderie Kugler"},{"name":"Kulturhaus Helferei"},{"name":"Kunstraum Walcheturm"}]So, a simple `input` such as the following *should* be working:
         

        <input type="text" style="width:270px;" class="choose_venue"/>

    However, the output I get is a window containing no text, but just a number of faint lines.

     

    I first thought that this might be something in my CSS, but the problem persists even when ALL css modifications have been removed.

    My next thought was that it might be a browser issue (I use Safari), but Chrome behaves exactly the same way.

    The only other idea I had was that the jquery files I was calling were out of date or that there was some other problem, but I tried multiple links and I always get the same result. As of my most recent attempts I am linking to the following files: 

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


    It appears that the number of these grey lines corresponds to the number of text values that should be returned. But beyond that, I have no idea what is causing this.

    Screen Shot 2018-12-15 at 09.30.55.png

    Javascript: show/hide div on linked page

    in JavaScript

    Posted

    I am displaying data from one page in another page in the following way: 

    <script>
    $(document).ready(function(){  
        $( "#2017" ).load( "data.html .2017" );
        $( "#2016" ).load( "data.html .2016" );
    });
</script>   

    <div id="2017"></div>
    <div id="2016"></div>

    ...BUT I also need to be able to hide (onload) certain div classes from within the linked file...  

    <script>
    $(document).ready(function(){
        $('.private-files').hide();
    }); 
</script>

    I know that the code above will hide divs by class if they are contained in the main page, but how can I make it so that divs of class 'private-files' in 'data.html' will also be hidden?

    Update content on iframe inside iframe

    in JavaScript

    Posted · Edited by paulclift

    Hey all,

     

    I have a language switch on a website which updates the displayed language in the main iframe. However, I am also using fancy box, which pops up out of the iframe, and is therefore an iframe within an iframe. I change the language to be displayed with the following code:

     

    function setlang(lang) {

    var i;
    var len;
    var list;
    var ifr = document.getElementById('mainframe');
    var cw = (ifr.contentWindow || ifr.contentDocument);
    list = cw.document.getElementsByClassName('langdiv');
    for (i=0, len=list.length ; i<len ; i++){
    list.style.display = 'none';
    }
    list = cw.document.getElementsByClassName(lang);
    for (i=0, len=list.length ; i<len ; i++){
    list.style.display = 'inline-block';
    }
    }
    .....and here is the HTML:
    <input id="EN" name="view" type="radio" onclick="setlang('EN'); sessionStorage.setItem('language', 'EN');">
    <input id="DE" name="view" type="radio" onclick="setlang('DE'); sessionStorage.setItem('language', 'DE');">
    <input id="FR" name="view" type="radio" onclick="setlang('FR'); sessionStorage.setItem('language', 'FR');">
    Could someone please help me make this work whereby the iframe is not necessarily called 'mainframe' but is simply *any* iframe that has multiple languages? I suspect that this will necessitate converting most of my vars into arrays, something which I am not really confident about doing on my own. Thanks!
    The website in question is: www.neuverband.ch

    Use current date to move divs

    in JavaScript

    Posted

     

    I was wondering if someone could come up with a way of using the current date to set the position of a div.

    I would like to apply such a process to this page: http://www.paulclift.net/news.html

    The object in question which I would like to move automatically up and down, so that it is in the appropriate place relative to the other items on the page, is the three HR lines with past/future written above & below it.

    There must be a way to do this - not having to constantly move this object, and others like it on other pages, would be a huge time-saver! Please help if you have any ideas. Thanks.

    Here is the code I have so far:

     

    //first, get today's date

    Date.prototype.yyyymmdd = function() { var yyyy = this.getFullYear().toString(); var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based var dd = this.getDate().toString(); return yyyy + (mm[1]?mm:"0"+mm[0]) + (dd[1]?dd:"0"+dd[0]); }; d = new Date();//next, set the 'seperator' id to today's date document.getElementById("seperator").setAttribute("id", d.yyyymmdd());//next, find divs with a date for an ID function sortDivs(div) { var elems = document.getElementsByClassName("date");// Sort array numerically elems.sort(function(a, b) { return a.id.split()[1] - b.id.split()[1]; });// finally, move elements to sorted order while (iLen--) div.insertBefore(a[iLen], div.firstChild); }
    <div id="news-content"></div><div id="separator" class="date">THIS IS MY SEPARATOR DIV/div><div id="20150523" class="date">CONTENT<div>MORE CONTENT</div></div><div id="20150524" class="date">CONTENT<div>MORE CONTENT</div></div><div id="20150525" class="date">CONTENT<div>MORE CONTENT</div></div>

    Show/hide divs inside inline frame from main page

    in JavaScript

    Posted

    With this code:

     

    <script>
    function setlanguage(language, n1, n2, n3)
    {
    var ShowLang = document.getElementById('mainframe').contentWindow.document.getElementsByClassName(language);
    for(var i = 0; i < ShowLang.length; i++)
    { ShowLang.style.display='none'; }
    var HideLang = document.getElementById('mainframe')contentWindow.document.getElementsByClassName(n1);
    for(var i = 0; i < HideLang.length; i++)
    { HideLang.style.display='none'; }
    }
    </script>
    ...I get the error message "SyntaxError: Expected an identifier but found 'contentWindow' instead" for the line:
    var HideLang = document.getElementById('mainframe')contentWindow.document.getElementsByClassName(n1);

    Show/hide divs inside inline frame from main page

    in JavaScript

    Posted · Edited by paulclift

    I noticed that other people seemed to have gotten the above javascript running with a 'getElementById' rather than by ClassName....... but surely that would not stop it from working....

     

    Also, I know that an 'if' and 'else' inside the function would be rather more elegant....

    Show/hide divs inside inline frame from main page

    in JavaScript

    Posted · Edited by paulclift

    So the following seems promising, but is not working for me for the moment:

     

     

    <script>
    function setlanguage(language, n1, n2, n3)
    {
    var ShowLang = document.getElementById('iframe').contentWindow.document.getElementsByClassName(language);
    for(var i = 0; i < ShowLang.length; i++)
    {
    ShowLang.style.display="block";
    }
    var HideLang = document.getElementById('iframe')contentWindow.document.getElementsByClassName(n1, n2, n3);
    for(var i = 0; i < HideLang.length; i++)
    {
    HideLang.style.display="none";
    }
    }
    </script>
    <body>
    <input id="english" type="radio" checked onclick="setlanguage('EN', 'DE', 'FR', 'IT')">
    <input id="deutsch" type="radio" onclick="setlanguage('DE', 'EN', 'FR', 'IT')">
    <input id="francais" type="radio" onclick="setlanguage('FR', 'EN, 'DE', 'IT')">
    <input id="italiano" type="radio" onclick="setlanguage('IT', 'EN', 'DE', 'FR')">
    <div id="iframe">
    <iframe src="home.html"></iframe>
    </div>
    </body>

    (it goes without saying that the "home.html" document is full of divs with class "EN", "DE" etc....)

     

    Perhaps I need to reload the iframe page after changing the display value in the parent document?

    Show/hide divs inside inline frame from main page

    in JavaScript

    Posted · Edited by paulclift

    I am trying to use a simple radio button in my main page to show and hide divs by class which are inside an iframe. Here are the relevant snippets of code:

     

    In the "index.html" :
    <head>
    <script>
    function setlanguage(language) {
    ..........will save myself the embarrassment of showing you my attempts at coding this.................
    }
    </script>
    </head>
    <body>
    <input id="english" type="radio" checked onclick="setlanguage('EN')">
    <input id="deutsch" type="radio" onclick="setlanguage('DE')">
    <input id="francais" type="radio" onclick="setlanguage('FR')">
    <input id="italiano" type="radio" onclick="setlanguage('IT')">
    <iframe src="home.html"></iframe>
    </body>
    Example from "inside-the-iframe.html" :
    <div class="EN">Hello world</div>
    <div class="DE">Guten Tag</div>
    <div class="FR">Bonjour</div>
    <div class="IT">Ciao Rigazzi</div>
    Should be dead easy for you guys... please help!

    document.getElementsByClassName iteration question

    in JavaScript

    Posted · Edited by paulclift

    Hey guys,

     

    So, since I have other divs on the page that I don't want to be affected by this, how can I apply it to multiple classes?

     

    <div class="group1 myclassname">

    <div id="some-other-thing-which-should-remain-visible">

     

    The 'display' variable should only affect divs with 'group1' ..... should be something like the following, I assume?

     

    if(spans.className == "group1" + other-variable)

    document.getElementsByClassName iteration question

    in JavaScript

    Posted

    Woah, I suddenly feel very out of my depth! I assumed that there was an easy fix for this. If it makes anything simpler, no element has more than one class name, since I am using this purely to hide and show <P> objects (not divs like in my first post)... could you please tell me how to use the code you posted? I tried stupidly cutting and pasting it, keeping the for loop which I already had, but nothing..

    Get iframe URL then use it dynamically

    in JavaScript

    Posted · Edited by paulclift

    Thanks for the response. I was just working on this now.. it works partly but the 'mainframe.src' which is reported to javascript function never changes, even when a different page is loaded..... I don't quite get why; is it because I specify the src in the 'inline' object itself?

     

    <!--SWITCH STUFF--!>
    <div class="switch>
    <input id="english" name="view" type="radio" checked onclick="change_language('EN')"/>
    <input id="deutsch" name="view" type="radio" onclick="change_language('DE')"/>
    </div>
    <!--IFRAME STUFF--!>
    <div id="iframe">
    <iframe name="mainframe" id="mainframe" src="home_EN.html"></iframe>
    <script>
    function change_language(new_language){
    var current_url = document.getElementById("mainframe").src;
    current_url = current_url.substring(current_url.lastIndexOf("/") + 1);
    var new_url = current_url.split ('_')[0] + '_' + new_language + '.html'; /* replaces the language suffix */
    document.all.mainframe.src = new_url; /* sends new URL to 'mainframe' */
    }
    </script>
    </div>
×
×
  • Create New...