Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need Help: OnMouse Over and multiple instances

    Hello all, I am very inexperienced in writing javascript, but need to get a few things to work. I'm doing 2 thing with js right now using code that is only partially mine to begin with.

    1) A swap image. This work fine, but I need a third 'onMouseOver' option to add to this.

    2)The action of this image (a button). I have it so that it expands a section of a page to reveal more content. This works fine as well, but I need to have more than one instance on the page. I'm pretty sure the problem is with the id, but can't get it to work if I place the html code more than once.

    I apologize for the novice level of this. I should know how to do this, but I don't. The page itself is not live, so I can't show anything in action. Help would be great appreciated. I've listed the js and the html I have below.
    Code:
    <!--swap-->
    <script language=JavaScript>
    intImage = 2;
    function swapImage() {
    switch (intImage) {
     case 1:
       IMG1.src = "images/expander-img1.jpg"
       intImage = 2
       return(false);
    case 2:
       IMG1.src = "images/expander-img2.jpg"
       intImage = 1
       return(false);
     }
    </script>
    
    <!--expander-->
    
    <script language="JavaScript" type="text/javascript">
    if (document.getElementById) {
    document.writeln('<style type="text/css"><!--')
    document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
    document.writeln('//--></style>') }
    
    function openClose(theID) {
    if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
    else { document.getElementById(theID).style.display = "block" } }
    </script>
    HTML
    [code]
    <div onClick="openClose('a1')" style="cursor:hand; cursorointer"><div class="centered"><IMG id="IMG1" name="IMG1" src="images/expander-img1.jpg" onclick="swapImage();"></div>
    </div>

    <div id="a1" class="texter"> (content)</div>
    [html]

  • #2
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry for the double post.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    I have redone your code. Here are the reasons.

    style="cursorointer;". You have that in a div, all divs expand to take 100% of the width it has available, in this case it's the width of the page, so the pointer will appear way to the right of the image. We normally only want this pointer to appear over the clickable items on a page. I could have given the div a width equal to the image, but we would be restrict us to only swap with images of that width, so I moved that rule to the image itself.

    That leaves an extra div and an extra onclick. I combined the JS functions and eliminated a div.

    I corrected the switch and removed the doc.write things (they didn't make sense).

    You don't tell us were or how the openClose() was to work, so that code is not here. Is there a pattern to how the text appears and disappears? If so we can add that to the single JS function.

    Code:
    <!doctype html>
    <html>
    <head>
     <link rel="stylesheet" href="css/screen.css" media="screen">
    </head>
    
    <body>
    <div class="centered">
    	<img id="IMG1" src="images/expander-img1.jpg" onclick="swapImage('a1');" style="cursor:pointer;">
    </div>
    <div id="a1" class="texter">(content)</div>
    
    <script language=JavaScript>
    intImage = 2;
    function swapImage(theID) {
    	pic = document.getElementById("IMG1");
    	switch (intImage) {
    	 case 1:
    	   pic.src = "images/expander-img1.jpg"
    	   intImage = 2
    	   break;
    	case 2:
    	   pic.src = "images/expander-img2.jpg"
    	   intImage = 1
    	   break;
    	 }
    	if (document.getElementById(theID).style.display == "block") {
    		document.getElementById(theID).style.display = "none"
    	}else{
    		document.getElementById(theID).style.display = "block"
    	}
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Biorick (09-18-2013)

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I have redone your code. Here are the reasons.

    style="cursorointer;". You have that in a div, all divs expand to take 100% of the width it has available, in this case it's the width of the page, so the pointer will appear way to the right of the image. We normally only want this pointer to appear over the clickable items on a page. I could have given the div a width equal to the image, but we would be restrict us to only swap with images of that width, so I moved that rule to the image itself.

    That leaves an extra div and an extra onclick. I combined the JS functions and eliminated a div.

    I corrected the switch and removed the doc.write things (they didn't make sense).

    You don't tell us were or how the openClose() was to work, so that code is not here. Is there a pattern to how the text appears and disappears? If so we can add that to the single JS function.

    Code:
    <!doctype html>
    <html>
    <head>
     <link rel="stylesheet" href="css/screen.css" media="screen">
    </head>
    
    <body>
    <div class="centered">
    	<img id="IMG1" src="images/expander-img1.jpg" onclick="swapImage('a1');" style="cursor:pointer;">
    </div>
    <div id="a1" class="texter">(content)</div>
    
    <script language=JavaScript>
    intImage = 2;
    function swapImage(theID) {
    	pic = document.getElementById("IMG1");
    	switch (intImage) {
    	 case 1:
    	   pic.src = "images/expander-img1.jpg"
    	   intImage = 2
    	   break;
    	case 2:
    	   pic.src = "images/expander-img2.jpg"
    	   intImage = 1
    	   break;
    	 }
    	if (document.getElementById(theID).style.display == "block") {
    		document.getElementById(theID).style.display = "none"
    	}else{
    		document.getElementById(theID).style.display = "block"
    	}
    }
    </script>
    </body>
    </html>
    Thank you for looking at this and helping. I think I explained things badly which led to some problems. I may also have pasted some messed up code, which completely make things nearly impossible to help.

    I'll start over and try to better explain what I'm looking to do and what I already have working. (I tried the code replacement you gave, it didn't work.)

    The first thing I want to do is pretty basic (I think).I'll have a "show more" button that will have 3 states. Right now the code only shows two, (normal and onClick)but I want to add in a Mouseover state. The action this button performs is to expand a block of text and images. Before the click, it's basically just a down pointing arrow. After the click (and resulting action) the arrow points up (image 2) to give the user the open to close things back up. All I need is a MouseOver state for that part.

    Next up is the action this button performs. What this does is make additional content available. For context, it's a "news story" page. At first,only the top five items will be visible (content with h2 tags, images and paragraphs, taking up the with of the parent container div).

    After clicking the expand button, the next group of content appears below the first 5 stories. Right now I have this working fine. The problem I'm having is that I have about 18 stories, and I need to have more than one expanding button. This would be placed in increments of 5. Since I only want one "expand' button to appear when the page load initially, I will have to nest each instance of the button inside, so that the second (and 3rd, etc) appear only after the first has been clicked.

    I don't think that should be too tough, the problem is that once I put more than one instance of the button in there, the action breaks. I'm sure it's because they are improperly using the same id's Even though they will look the same, they need to work independently. Like I said, I am a huge novice here.

    To try to explain the expanding differently, I'll describe the various stages.

    1) person visits site and scrolls to see 5news story summaries, below that, there's a button with a down point arrow.

    2) they click the arrow and it becomes an up pointing arrow with 5 more news summaries below it. (Here's where I'd want the button to have that mouseover state, btw)

    3) The viewer scrolls down to browse the next five stores. There are now 10 summaries on the page. Below that 10th is another instance of the button. That instance is a down arrow. When clicked, it turns to an up arrow and 5 more appear.

    Now the long scrolling page has 5 stories, then a up arrow, then 5 more stories, a second up arrow and 5 more stories. It would continue on this way.

    Since I've gotten so wordy, here, I will re-post the code is a separate post.

    thanks for your help and patience.

  • #5
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok, here's a more complete code that mostly works. It does expand the new section and it does swap the image onclick. I noticed that the revision you gave me also had a callout to some css, which I don't have. That may be why it didn't work when I tried it. I was given this code mostly prepared and made only minor tweaks to it. Shows how much of a novice I am. The code works for what it's supposed to do, but now I need it to do more.

    code]
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--this makes the button image swap-->
    <SCRIPT LANGUAGE=JavaScript>
    intImage = 2;
    function swapImage() {
    switch (intImage) {
    case 1:
    IMG1.src = "images/expander-img1.jpg"
    intImage = 2
    return(false);
    case 2:
    IMG1.src = "images/expander-img2.jpg"
    intImage = 1
    return(false);
    }
    }
    </SCRIPT>

    <!---this expands the page when the image is clicked-->

    <script language="JavaScript" type="text/javascript">
    if (document.getElementById) {
    document.writeln('<style type="text/css"><!--')
    document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
    document.writeln('//--></style>') }

    function openClose(theID) {
    if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
    else { document.getElementById(theID).style.display = "block" } }
    </script>
    </head>

    <body>
    <div class="container">
    <div> (various content, the first 5 story summaries)

    <div onClick="openClose('a1')" style="cursor:hand; cursorointer"><!--this is connected to the expander code above-->

    <div class="centered"><IMG src="images/expander-img1.jpg" name="IMG1" width="50" height="30" id="IMG1" onclick="swapImage();"></div><!--this is connected to swapping out the two images-->
    </div>

    <div id="a1" class="texter"> <!--this div id relates to the expander action. Everything inside this div is hidden until the button is clicked-->

    (All the content that is collapsed and expanded, including additional nested buttons that perform the same action later)

    </div>
    </div>
    </div>
    </body>
    </html>
    [/code]

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    I think I deserve better than
    (I tried the code replacement you gave, it didn't work.)
    I just don't give people code that I don't test. I also spend time writing, testing and fixing what I give people, so "it didn't work" isn't enough.

    Spend some time and tell me what you did and why it didn't work. The only thing I did when I posted this code to you was put your image names (images/expander-img1.jpg) back in. I had to use mine because I do not have access to yours. And I put
    Code:
    <link rel="stylesheet" href="css/screen.css" media="screen">
    back, maybe that was a mistake; I didn't know what that does.
    Why not remove the link and try it again (more then one click please) and then tell me what doesn't work.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You're right about everything you posted. I did not paste your code properly, and did not mean to say that the code you posted didn't work. It was more along the lines of 'I couldn't make it work, and what I had was working.' But is wasn't nearly clear enough about that and I apologize. In my version I have the script in the header. Is that wrong?

    I substituted your code properly and it works well in swapping the one image for the other on the click. The "expanding action" also works. What I was hoping for was a third state onMouseOver. That would use "images/expander-img3.jpg"

    In a separate issue, I need to have it do this multiple times on the same page.

    I will flesh out the html code in the body some more and give you something better to look at in my next post.

    Thanks again, and I apologize for just writing 'it didn't work' I obviously came off as blaming your work and did not mean to.

  • #8
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I think I deserve better than I just don't give people code that I don't test. I also spend time writing, testing and fixing what I give people, so "it didn't work" isn't enough.

    Spend some time and tell me what you did and why it didn't work. The only thing I did when I posted this code to you was put your image names (images/expander-img1.jpg) back in. I had to use mine because I do not have access to yours. And I put
    Code:
    <link rel="stylesheet" href="css/screen.css" media="screen">
    back, maybe that was a mistake; I didn't know what that does.
    Why not remove the link and try it again (more then one click please) and then tell me what doesn't work.
    I fleshed out the html to show the sections that I want shown and hidden. In this case I made it so that initially 3 stories show. After clicking the first button, the next 3 stories appear. Then after clicking the second instance, 3 more stories appear.

    Code:
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!--this makes the button image swap-->
    
    <script language=JavaScript>
    intImage = 2;
    function swapImage(theID) {
    	pic = document.getElementById("IMG1");
    	switch (intImage) {
    	 case 1:
    	   pic.src = "images/expander-img1.jpg"
    	   intImage = 2
    	   break;
    	case 2:
    	   pic.src = "images/expander-img2.jpg"
    	   intImage = 1
    	   break;
    	 }
    	if (document.getElementById(theID).style.display == "block") {
    		document.getElementById(theID).style.display = "none"
    	}else{
    		document.getElementById(theID).style.display = "block"
    	}
    }
    </script>
    
    <!---this expands the page when the image is clicked-->
    
    <script language="JavaScript" type="text/javascript">
    if (document.getElementById) {
    document.writeln('<style type="text/css"><!--')
    document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
    document.writeln('//--></style>') }
    
    function openClose(theID) {
    if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
    else { document.getElementById(theID).style.display = "block" } }
    </script>
    </head>
    
    <body>
    <div class="container">
    	<div class="articles">
    		<h2>Story One Title</h2>
    			<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    		<hr class="line">
    		<h2>Story Two Title</h2>
    			<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    		<hr class="line">
    		<h2>Story Three Title</h2>
    			<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    		<hr class="line">
    
    		<div class="expander button"><img id="IMG1" src="images/expander-img1.jpg" onclick="swapImage('a1');" style="cursor:pointer;"></div> <!--first instance of button-->
    
    		<div id="a1" class="texter"> <1--Content that is shown after clicking the first button-->
    			<h2>Story One Title</h2>
    				<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    			<hr class="line">
    			<h2>Story Two Title</h2>
    				<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    			<hr class="line">
    			<h2>Story Three Title</h2>
    				<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    			<hr class="line">
    
    			<div class="expander button"><img id="IMG1" src="images/expander-img1.jpg" onclick="swapImage('a1');" style="cursor:pointer;"></div><!--second instance of button-->
    
    			<div id="a1" class="texter"> <1--Content that is shown after clicking the second button, the second button is only visible after the first is click since is it nested inside-->
    				<h2>Story One Title</h2>
    					<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    				<hr class="line">
    				<h2>Story Two Title</h2>
    					<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    				<hr class="line">
    				<h2>Story Three Title</h2>
    					<div class="summary"><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
    				<hr class="line">
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>

  • #9
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I think I deserve better than I just don't give people code that I don't test. I also spend time writing, testing and fixing what I give people, so "it didn't work" isn't enough.

    Spend some time and tell me what you did and why it didn't work. The only thing I did when I posted this code to you was put your image names (images/expander-img1.jpg) back in. I had to use mine because I do not have access to yours. And I put
    Code:
    <link rel="stylesheet" href="css/screen.css" media="screen">
    back, maybe that was a mistake; I didn't know what that does.
    Why not remove the link and try it again (more then one click please) and then tell me what doesn't work.
    You're right about everything you posted. I did not paste your code properly, and did not mean to say that the code you posted didn't work. It was more along the lines of 'I couldn't make it work, and what I had was working.' But is wasn't nearly clear enough about that and I apologize. In my version I have the script in the header. Is that wrong?

    I substituted your code properly and it works well in swapping the one image for the other on the click. The "expanding action" also works. What I was hoping for was a third state onMouseOver. That would use "images/expander-img3.jpg"

    In a separate issue, I need to have it do this multiple times on the same page.

    I will flesh out the html code in the body some more and give you something better to look at in my next post.

    Thanks again, and I apologize for just writing 'it didn't work' I obviously came off as blaming your work and I did not mean to.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    This could be simple or it could be hard. If the stories are just a total of nine and they are always the same, no problem.

    But if your talking things that change daily like news feed. Then it's harder.

    So answer me this; are the stories static or changeable? I'm also interested in the images. If they are clicked on to alter your page what are they? All I can think of is something saying "next" or "More stories".

    I ask this because if we're talking changeable stories were looking at DB storage and ajax.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    This could be simple or it could be hard. If the stories are just a total of nine and they are always the same, no problem.

    But if your talking things that change daily like news feed. Then it's harder.

    So answer me this; are the stories static or changeable?
    There won't be any daily change like a news feed. Although the stories and placement of those stories will change at times, all those changes would be done manually in the html. So for all intents and purposes, they'll be the same. It's just a matter of going into the html and inserting a new story and then moving the older ones down. This framework will be used for other pages as well. On those pages the content would be things like videos or reports. Stuff like that. But it's always old-fashioned manual replacement.

    I'm also interested in the images. If they are clicked on to alter your page what are they? All I can think of is something saying "next" or "More stories".

    I ask this because if we're talking changeable stories were looking at DB storage and ajax.
    The images are pretty much what you describe. Image 1 is a downward pointing arrow and Image 2 is an upward pointing arrow. The addition I want to make is "image3.jpg". That image is a darker downward pointing arrow that should appear on a mouseover.

    But because I'm using it more than once on a page, I need it to occur as separate instances.

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    My images are on photobucket so this will work without any doctoring on your part. Left some stuff in that you had, but they are not needed here, maybe you need them elsewhere. Study it. Ansk if you don't understand.
    FYI: JS can not change onclick of something.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script>
    var incident = 1;
    function open_text() {
    	document.getElementById('img1').style.display = "none";
    	document.getElementById('img2').style.display = "block";
    	document.getElementById('a'+incident).style.display = "block";
    }
    function close_text(){
    	document.getElementById('img2').style.display = "none";
    	document.getElementById('img1').style.display = "block";
    	document.getElementById('a'+incident).style.display = "none";
    	if(incident < 3){
    		incident++;
    	}else{
    		incident = 1;
    	}
    }
    </script>
    
    <style type="text/css">
    #a1, #a2, #a3{
    	display:none;
    }
    #img1{
    	height: 48px;
    	width: 46px;
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_top_zps7dcacefa.png');
    }
    #img1:hover{
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_bottom_zps0286edcb.png');
    }
    #img2{
    	height: 48px;
    	width: 46px;
    	display:none;
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png');
    }
    </style>
    </head>
    
    <body>
    <div class="articles">
    	<div id="a1" class="texter">
    	<h1>Main 1 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	</div>
    
    	<div id="a2" class="texter">
    	<h1>Main 2 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    		</div>
    
    	<div id="a3" class="texter">
    	<h1>Main 3 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	</div>
    
    	<div id="img1" onclick="open_text();"></div>
    	<div id="img2" onclick="close_text();"></div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Biorick (09-19-2013)

  • #13
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    My images are on photobucket so this will work without any doctoring on your part. Left some stuff in that you had, but they are not needed here, maybe you need them elsewhere. Study it. Ansk if you don't understand.
    FYI: JS can not change onclick of something.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script>
    var incident = 1;
    function open_text() {
    	document.getElementById('img1').style.display = "none";
    	document.getElementById('img2').style.display = "block";
    	document.getElementById('a'+incident).style.display = "block";
    }
    function close_text(){
    	document.getElementById('img2').style.display = "none";
    	document.getElementById('img1').style.display = "block";
    	document.getElementById('a'+incident).style.display = "none";
    	if(incident < 3){
    		incident++;
    	}else{
    		incident = 1;
    	}
    }
    </script>
    
    <style type="text/css">
    #a1, #a2, #a3{
    	display:none;
    }
    #img1{
    	height: 48px;
    	width: 46px;
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_top_zps7dcacefa.png');
    }
    #img1:hover{
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_bottom_zps0286edcb.png');
    }
    #img2{
    	height: 48px;
    	width: 46px;
    	display:none;
    	background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png');
    }
    </style>
    </head>
    
    <body>
    <div class="articles">
    	<div id="a1" class="texter">
    	<h1>Main 1 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
    		</p>
    	</div>
    	<hr class="line">
    	</div>
    
    	<div id="a2" class="texter">
    	<h1>Main 2 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
    		</p>
    	</div>
    	<hr class="line">
    		</div>
    
    	<div id="a3" class="texter">
    	<h1>Main 3 Group</h1>
    	<h2>Story One Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Two Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	<h2>Story Three Title</h2>
    	<div class="summary">
    		<p>
    			This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
    		</p>
    	</div>
    	<hr class="line">
    	</div>
    
    	<div id="img1" onclick="open_text();"></div>
    	<div id="img2" onclick="close_text();"></div>
    </div>
    </body>
    </html>
    Hey Thanks! Some pretty cool stuff. First off, the Mouse Over I was looking for works very nicely. Of course CSS should do that. I don't know what I was thinking. Turns out I forgot about the mouseover when a user has already expanded the section and wants to close it up again. But with the way you had it written out, it was easy enough to create a 4th image and make that work.

    The expansion script is working a little strangely on this end though. I copied your text into a blank txt file this time and didn't change anything.
    The initial view I got was that of a downward pointing arrow, which make sense. So I hovered over the arrow and it changed color... also good.

    I clicked on the arrow and it opened up "Main 1 Group". then I closed it by clicking the arrow. I clicked the arrow again and it showed the "Main 2 Group". I repeated the procedure and got "Main Group 3"

    That's pretty cool looking stuff, swapping out entire sections after clicking what is basically the same button. Pretty wild!

    But what I need it do do is more basic. (I think it is at least). I need it to start by showing 3 stories with a downward arrow below those 3 stories. If the user clicks that arrow, if opens up 3 more stores. The first 3 are still there, the page now has 6 stories on it. 3, then an arrow, then three more and NOW a second arrow (that wasn't visible at first). If the user clicks that second arrow, 3 MORE stories appear. Now there's a total of nine now with a THIRD arrow below that. and so on and so on.

    The page will keep getting longer and longer as arrows are clicked.

    Sorry for the confusion and thanks for 1) the fix for hovering 2) a pretty cool script, even if it's not the action I need it to be.

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    I will be in and out all weekend. My granddaughter is getting married Sat.
    You maybe able to do this yourself. But if not I'll be back.
    And maybe someone else will come along and modify the code to do what you want.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #15
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I will be in and out all weekend. My granddaughter is getting married Sat.
    You maybe able to do this yourself. But if not I'll be back.
    And maybe someone else will come along and modify the code to do what you want.
    Congratulations on your granddaughters wedding! I appreciate the help you've given me on this. The code you provided does some pretty cool things. I hope you're able to take a look at it again when you're able.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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