Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    How is this programmed? (Or what is it called)
    Sorry if this is easy or somewhere easy to find.. but I don't even know what it's called, so kinda hard to search for, lol.

    What I want to do is have a list on a webpage, and for each item you can click "learn more" and more information about that item appears on the page.

    Example:

    Widget 1
    This Widget is cool. (learn more)

    Widget 2
    This Widget is warm. (learn more)
    Then after clicking learn more on Widget 1.

    Widget 1
    This Widget is cool.

    Widget 1, blah blah blah blah.. for however many lines I choose.

    Widget 2
    This Widget is warm. (learn more)
    I do think I could accomplish this with a new page that looks the same, plus the new info. But my website is using CSS, PHP, and Wordpress as a CM. So I was wondering if there was a PHP trick to do this? Or have to make new pages?

    Thanks.

  2. #2
    ABW Ambassador Lanadili's Avatar
    Join Date
    February 23rd, 2007
    Location
    Shreveport, LA
    Posts
    1,114
    You might find what your looking for here .

    They have a bunch of neat tricks that you can put on your site.

  3. #3
    ABW Ambassador PatrickAllmond's Avatar
    Join Date
    September 20th, 2005
    Location
    OKC
    Posts
    1,219
    No you don't need a new page. This is how you do it:

    Put the information in a <div></div>. You will always put the information on the page - even when you don't want it to show. You can then show/hide that div with javascript. So you clicking/double clicking on something will fire a javascript event and the javascript will hide/show the <div>

    Patrick
    ---
    This response was masterly crafted via the fingers of Patrick Allmond who believe you should StopDoingNothing starting today.
    ---
    Focus Consulting is where I roll | Follow @patrickallmond on Twitter
    Search Engine Marketing | Search Engine Optimization | Social Media | Online Video

  4. #4
    Master of Design AlexBet's Avatar
    Join Date
    January 18th, 2005
    Location
    Toronto, Canada
    Posts
    1,364
    Hey Hardaka,


    It is just showing/hiding DIVs. It is your choice how they are displayed (click or mouseover). They must be accompanied by a Javascript code so you can do the functionality for them. If you search through Javascript websites, I am pretty sure that you will find a script that does that.

    Hope this helps.
    Alex
    AlexBet.com - Professional Website Design, Website Development, Mobile App Development!


    "The bitterness of poor quality remains long after the sweetness of low price is forgotten"
    Benjamin Franklin

  5. #5
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Oh, thanks y'all. That does help. I'll see if I can find that Javascript.

    Secondary question, guessing that should be simple Javascript and not use that much bandwidth?

  6. #6
    ABW Ambassador PatrickAllmond's Avatar
    Join Date
    September 20th, 2005
    Location
    OKC
    Posts
    1,219
    No bandwidth at all. Javascript runs in the browser, and makes no connection (in this case) back to the server. If you got this set up right (with the divs) you could actually unplug from the internet and your hide/show will work the same.
    ---
    This response was masterly crafted via the fingers of Patrick Allmond who believe you should StopDoingNothing starting today.
    ---
    Focus Consulting is where I roll | Follow @patrickallmond on Twitter
    Search Engine Marketing | Search Engine Optimization | Social Media | Online Video

  7. #7
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Thanks again, and I know now what I want to do.

    Use a JS to Hide/Show some text, but have the text show if the person can't use JS.

    Just trying to find out how to do that exactly is the harder part, but knowing is half the battle.

  8. #8
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    Give me a little time, I'll post the code I use (based on the front page news box on Skaboodle [in my sig]).

    I just have to gather it all up from different files.

    By the way, ignore the JS error. Everything was working but the entire site got wiped out yesterday so some things are still being squared away.
    Last edited by mobilebadboy; November 14th, 2007 at 11:10 PM.

    Shawn Kerr (.com) | Disney World | SEC Football

  9. #9
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    The JS (numdivs is the total number you're going to have).

    If you don't put it in an external file then just wrap the appropriate script tags around it.

    Code:
    numdivs=3
    
    IE5=NN4=NN6=false
    if(document.all)IE5=true
    else if(document.layers)NN4=true
    else if(document.getElementById)NN6=true
    
    function init() {
    	showDiv(0);
    }
    function showDiv( which ) {
    	for(i=0;i<numdivs;i++) {
    		if(NN4) eval("document.div"+i+".visibility='hidden'")
    		if(IE5) eval("document.all.div"+i+".style.visibility='hidden'")
    		if(NN6) eval("document.getElementById('div"+i+"').style.visibility='hidden'")
    	}
    	if(NN4) eval("document.div"+which+".visibility='visible'")
    	if(IE5) eval("document.all.div"+which+".style.visibility='visible'")
    	if(NN6) eval("document.getElementById('div"+which+"').style.visibility='visible'")
    }
    Add this to your opening body tag:

    onload="init()"

    Then just create your divs and id them as follows, div0 being your first (the one that will show first by default. Just remember, for every div you add, increase the numdivs in the JS.


    Code:
    <div id="div0">content</div>
    <div id="div1">content</div>
    <div id="div2">content</div>
    I use id="divalt" for my non-JS box:


    Code:
    <noscript>
    <div id="divalt">content</div>
    </noscript>
    Then add this to your CSS (add extra styling tags as needed, of course):


    Code:
    #div0 { position:absolute; visibility: hidden }
    #div1 { position:absolute; visibility: hidden }
    #div2 { position:absolute; visibility: hidden }
    #divalt { position:absolute }
    May need to be tweaked to suit you, but I just snagged my code real quick.

    Then make your links as follows:


    Code:
    <a href="javascript:showDiv(0)">Blah</a>
    <a href="javascript:showDiv(1)">Blah</a>
    <a href="javascript:showDiv(2)">Blah</a>
    (And of course make a non-JS alternative menu).

    That should be everything.

    Shawn Kerr (.com) | Disney World | SEC Football

  10. #10
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Wow.. thanks.

    Two quick questions:

    1) How do I call the external file to work on the webpage?

    2) And a non-JS alternative menu would just be the webpage, with everything showing and not hidden? And how would I tell it to load that one instead?

    Sorry.. I am a bit of a n00b to some of this, LOL.

  11. #11
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    1) Put that JS in a file (with the extension of .js) and then put this in between your HEAD tags (change 'filename' of course):

    Code:
    <script language="javascript" type="text/javascript" src="filename.js"></script>
    2) Basically for anywhere I show JS content, I put a noscript amount of content right with it. But you're going to have to have a static alternative to any content you want to show. It just depends on how your site is/will be set up.

    I've never done an entire page in javascript, I just write chunks of pages in javascript. If you want to show either/or you'll have to write code 'in' javascript.

    Very rough example.....Forget external stuff for now, just past the following code in an html file and view it through Firefox (I say FF just because it's easier to turn JS on and off) to see what show and what doesn't.

    Basically, if JS isn't turned on by a visitor (or an SE) they're only going to see what's inside the noscript tags. The 3 divs that aren't written 'in' JS won't show, because the init() function I said to add to the body tag makes div0 show, and since it can't be initiated (and is hidden initially by the CSS), then it's going to stay invisible.

    I know I describe things bad sometimes, if I did, tell me.


    Code:
    <html>
    
    <head>
    
    <title>Page</title>
    
    <script language="javascript" type="text/javascript">
    numdivs=3
    
    IE5=NN4=NN6=false
    if(document.all)IE5=true
    else if(document.layers)NN4=true
    else if(document.getElementById)NN6=true
    
    function init() {
    	showDiv(0);
    }
    function showDiv( which ) {
    	for(i=0;i<numdivs;i++) {
    		if(NN4) eval("document.div"+i+".visibility='hidden'")
    		if(IE5) eval("document.all.div"+i+".style.visibility='hidden'")
    		if(NN6) eval("document.getElementById('div"+i+"').style.visibility='hidden'")
    	}
    	if(NN4) eval("document.div"+which+".visibility='visible'")
    	if(IE5) eval("document.all.div"+which+".style.visibility='visible'")
    	if(NN6) eval("document.getElementById('div"+which+"').style.visibility='visible'")
    }
    </script>
    
    <style type="text/css">
    #div0 { position:absolute; visibility: hidden; border:1px #FF0000 solid }
    #div1 { position:absolute; visibility: hidden; border:1px #000000 solid }
    #div2 { position:absolute; visibility: hidden; border:1px #0000FF solid }
    #divalt { position:absolute }
    </style>
    
    </head>
    
    <body onload="init()">
    
    <script language="javascript" type="text/javascript">
    document.write("<a href='javascript:showDiv(0)'>widget 1</a> ");
    document.write("<a href='javascript:showDiv(1)'>widget 2</a> ");
    document.write("<a href='javascript:showDiv(2)'>widget 3</a>");
    document.write("<br /><br />");
    </script>
    
    <noscript>
    widget 1
    <a href="link to widget page 2">widget 2</a>
    <a href="link to widget page 3">widget 3</a>
    <br /><br />
    </noscript>
    
    <div id="div0">This is content about widget 1</div>
    <div id="div1">This is content about widget 2</div>
    <div id="div2">This is content about widget 3</div>
    
    <noscript>
    <div id="divalt">This is content about widget 1</div>
    </noscript>
    
    </body>
    
    </html>

    Shawn Kerr (.com) | Disney World | SEC Football

  12. #12
    What's the word? Rhia7's Avatar
    Join Date
    January 13th, 2006
    Posts
    9,578
    That looks interesting, Shawn.
    I might try it
    Thanks
    ~Rhia7 -- Remember the 7
    Twitter me

  13. #13
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Oh wow, thank you for all that time and effort Shawn. That does look like a really neat script.

    Although, unfortunately it doesn't do what I'm looking for. Sorry.

    This is about the closest I have found with google so far:
    Code:
    <script type="text/javascript">
    function toggleview(element1) {
    
       element1 = document.getElementById(element1);
    
       if (element1.style.display == 'block' || element1.style.display == '')
          element1.style.display = 'none';
       else
          element1.style.display = 'block';
    
       return;
    }
    </script>
    
    <a href="#" onclick="toggleview('div1')">Hide/Unhide DIV</a>
    
    <div id="div1" >
    Div will toggle
    </div>
    Although this code has the element showing and not hiden. I'd like it the other way around.. doesn't have the no script either, plus I haven't quite figured out how to add more div's without it messing up, but hopefully that makes sense?

    Basically, instead of having the clickables above a box that loads the div, I'd like a list.

    Widget 1

    Widget 2

    Widget 3

    A clickable would show the content under the one clicked, but the page loads with them hidden. I have tried to make your script do that, but so far failing. Going to keep playing around and looking for google, and hopefully get luck! I have no JS knowledge though, LOL.

    Thanks again.

  14. #14
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    In regards to my last post, I believe I got what I need now. Just need to play and see if I can make it work.

    Found here.

    Thanks to Lanadili and hopefully I'm going to be set.

  15. #15
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Well.. stuck again.

    As I said, I'm using Wordpress as my CM, and I don't know if that is the problem, but I can't get the method from that webpage I linked to, to work.

    The code it says to paste to head, I put in the head of the header (Also tried it in other random places, lol), but just work. I checked, and I do have the link right for the external file right.. but maybe my problem is it won't load anyway?

  16. #16
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Okay! I have figured out my problem (I got smart and asked on the wordpress forum).

    I was inserting the code wrong, LOL.

    For anyone else who has problems with show/hide and wordpress, you can't insert the code into the code section of creating/editing a page or post. You have to put it into a template file. Unless you hacked your theme so you could do it the first way.

    Hopefully that made sense.

  17. #17
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    Yes, Wordpress doesn't accept Javascript or PHP directly into posts without using plugins. You can add either to your template files without additional plugins.

  18. #18
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Yeah, and I fortunately only need one page to have the script on it, and I'm not using my links template, so I gutted it's content and I'm building the page on the template. Created a blank page to use that template, and it is working out great so far.

  19. #19
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    I'd rather do it with plugins.

  20. #20
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Yeah, that would be easier, especially if more than one page is needed, but I couldn't find any plugins that made that possible either, lol.

  21. #21
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    When I want to add the Javascript for a merchant creative I use the Adsense Manager plugin...
    I know it sounds strange but If I insert Javascript code in the 'direct ad code option' and insert the ad in a post, it works.
    It might work for your need.

  22. #22
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Dang, my "fix" was working.. but now it isn't and can't get it working.

    Is there anything special that needs to be done to make Adsense Manager work? Well, I'm able to insert ads, but Wordpress will not allow me to use the div tags. It keeps changing my div to p.

    There any other plugins or hacks you know of that may work? I'm searching, but finding nothing.

  23. #23
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    The visual editor is changing the Divs to Ps not wordpress. You could paste your code in code view and then save. As soon as you go back to the visual editor, it'll do what it does.

  24. #24
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Ah, thank you, I used phpmyadmin.

    Although, still doesn't work, plus it is pushing everything almost off the page to the right. No scrolling. The divs stayed divs though, and this is the same code that had been working before..

    I'm thinking I should just toss Wordpress for another CM. There one that doesn't change stuff on you and allow you to use JS? lol

  25. #25
    Visual Artist & ABW Ambassador lostdeviant's Avatar
    Join Date
    September 7th, 2007
    Location
    Cuautitlán, Edo. de México
    Posts
    1,725
    well technically Wordpress is not a CMS, just blog software. Many of us use WordPress as a CMS because it is so easy to use, but it does have limitations most of which you can get around with a plugin.

    You could try Joomla or Drupal or one of the other Full CMSes out there to see if the included editors change Javascript or not. Just do a search for Content Management Systems and or CMS and you'll find info.

    WordPress didn't design the editor it uses. The included editor is 3rd party and also free. (and yes people wish that it didn't do what it does) Therefore if another CMS uses the same editor it would probably do the same thing.

+ Reply to Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. What is it called?
    By Steveinid in forum Programming / Datafeeds / Tools
    Replies: 2
    Last Post: December 17th, 2003, 03:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •