/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Change "div" twice on click

Copy linkTweet thisAlerts:
Dec 07.2007

Eh, don’t really know what to put as title but I have a link that displays an iframe when clicked, it also changes the link text to Italic…

[code=html]
[<a href=”#self” onclick=”document.getElementById(‘DivMore’).innerHTML = ‘<iframe height=460px width=400 frameborder=0 scroll=auto src=http://edirectories.info/pagerank/geturl.php?url={$linkdetail.URL} </iframe>’; this.className=’menuclicked’; “>More Info…</a>]
[/code]

When a user clicks on More Info the iframe appears… What I would LIKE to do is change the “More Info” to something like “Less Info” onClick and when the user clicks on it again have it remove the code between the “div” (i.e. remove the iframe and have the text return to More Info). I’ve had a hard time searching for this and I’m just not bright enough to figure it out.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERDec 07.2007 — 
  • 1. Set a global variable like 'More_or_Less' = 'Less'

  • 2. Within the 'onClick=' function, check the 'More_or_Less' flag.

    If flag == 'Less',

    change .innerHTML contents to limited information and set flag = 'More'

    If flag != 'Less',

    change .innerHTML contents to expanded information and set flag = 'Less'

    Note: alter initialization and test logic of step #1 & #2 to match desired starting conditions.
    • Copy linkTweet thisAlerts:
    @UncleTimmyauthorDec 07.2007 — Thanks for the reply! I tried what you said but I'm new at Javascript so I couldn't get it to work.

    Are there any examples somewhere on this board or perhaps the internet? I tried a simple If Statement to see if the DIV was empty but it doesn't seem to work like that.

    I'm stumped. Anyone have any suggestions?
    Copy linkTweet thisAlerts:
    @JMRKERDec 07.2007 — Post what you tried.

    Maybe a simple fix!
    Copy linkTweet thisAlerts:
    @UncleTimmyauthorDec 07.2007 — Okay, I actually just found a script on this board that does what I want only it was for mouseover, so I just changed it to onClick and it works [i]alright[/i]. Except there is some sort of delay in this code (Kor posted it: http://www.webdeveloper.com/forum/showthread.php?t=74026) so sometimes it doesn't work properly. (My test page: http://edirectories.info/test.php) Sometimes the iframe returns after I click the link again. I'm sure I can fix that though...

    What I need now is to change the text back and forth between More Info and Less Info...

    <i>
    </i>&lt;script type="text/javascript"&gt;
    var stat;
    var delay=2000;//delay in milliseconds
    function show(){
    var oIfr = document.getElementById('ifr');
    oIfr.style.display=(oIfr.style.display=='block')?'none':'block';
    }
    function hide(){
    stat = setTimeout('show()',delay)
    }
    onload=function(){
    var dIfr = document.getElementById('ifr').contentWindow.document.documentElement;
    dIfr.onmouseover = function(){parent.clearTimeout(parent.stat)}
    dIfr.onmouseout = function(){parent.hide()}
    }
    &lt;/script&gt;
    Copy linkTweet thisAlerts:
    @savvykmsDec 07.2007 — [CODE]<html>
    <head>
    <title></title>
    <script language="javascript" type="text/javascript">
    <!--
    var lclass1 = "class1";
    var lclass2 = "class2";
    function displaystuff(obj,contents,area,text1,text2) {
    var thecontent = document.getElementById(contents).innerHTML;
    if (obj.className == lclass1) { //DISPLAY
    obj.className = lclass2;
    document.getElementById(area).innerHTML = thecontent;
    document.getElementById(area).style.display = "block";
    obj.innerHTML = text2;
    }
    else { //HIDE
    obj.className = lclass1;
    document.getElementById(area).innerHTML = "";
    document.getElementById(area).style.display = "none";
    obj.innerHTML = text1;
    }
    }
    -->
    </script>
    <style type="text/css">
    <!--
    .class1 { font-weight: none; }
    .class2 { font-weight: bold; }
    #displayarea { position: aboslute; top: 100px; left: 100px; }
    #thecontent { display: none; }
    -->
    </style>
    </head>
    <body>
    <div style="display: none;" id="thecontent"><iframe height="460" width="400" frameborder="0" scroll="auto" src="http://www.google.com/"> </iframe></div>
    [<a href="javascript://" class="class1" onclick="displaystuff(this,'thecontent','displayarea','More Info...','Less Info...')">More Info...</a>]
    <div id="displayarea"></div>
    </body>
    </html>[/CODE]
    Copy linkTweet thisAlerts:
    @UncleTimmyauthorDec 09.2007 — Thanks for that! Only problem is, it doesn't show the IFrame when clicked. It does, however, properly change the text which is what I wanted.. Now I just have to work on integrating the previous code that displayed the iframe. I will post the end result if I get it working.

    Edit: Got it working for me. Thanks so much for the help! Wish I could change the title of this thread so more people are able to find it.

    <i>
    </i>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    var stat;
    var delay=1000;//delay in milliseconds
    function show(){
    var oIfr = document.getElementById('ifr');
    oIfr.style.display=(oIfr.style.display=='block')?'none':'block';
    }
    function hide(){
    stat = setTimeout('show()',delay)
    }
    onload=function(){
    var dIfr = document.getElementById('ifr').contentWindow.document.documentElement;
    dIfr.onclick = function(){parent.clearTimeout(parent.stat)}
    dIfr.onclick = function(){parent.hide()}

    }
    &lt;/script&gt;
    &lt;script language="javascript" type="text/javascript"&gt;
    &lt;!--
    var lclass1 = "class1";
    var lclass2 = "class2";
    function displaystuff(obj,contents,area,text1,text2) {
    var thecontent = document.getElementById(contents).innerHTML;
    if (obj.className == lclass1) { //DISPLAY
    obj.className = lclass2;
    document.getElementById(area).innerHTML = thecontent;
    document.getElementById(area).style.display = "block";
    obj.innerHTML = text2;
    }
    else { //HIDE
    obj.className = lclass1;
    document.getElementById(area).innerHTML = "";
    document.getElementById(area).style.display = "none";
    obj.innerHTML = text1;
    }
    }
    --&gt;
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
    &lt;!--
    .class1 { font-weight: none; }
    .class2 { font-weight: bold; }
    .displayarea { position: aboslute; top: 100px; left: 100px; }
    .thecontent { display: none; }
    --&gt;
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="thecontent" style="display: none;"&gt; &lt;iframe src="iframe.php" id="ifr" style="display:none"&gt;&lt;/iframe&gt; &lt;/div&gt;
    [&lt;a href="javascript://" class="class1" onclick="show(); displaystuff(this,'thecontent','displayarea','More Info...','Less Info...');"&gt;More Info...&lt;/a&gt;]
    &lt;div id="displayarea"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @UncleTimmyauthorDec 09.2007 — [url=http://edirectories.info/details/link-1501.php]See it in action[/url] (WebDeveloper.com Details Page). Click on [b]Stats...[/b]
    ×

    Success!

    Help @UncleTimmy spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.5,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...