- Australia
- Bought between 50 and 99 items
- Has been a member for 3-4 years
I am looking for a way to get the content in a div to change when a particular button is pressed.
I’ve put together a simple HTML page with the elements, can someone help me get this to work please?
http://smbnetworks.com.au/testdiv.htmlThanks heaps
- Author had a Free File of the Month
- Author was Featured
- Bought between 50 and 99 items
- Exclusive Author
- Has been a member for 3-4 years
- Pakistan
- Sold between 1 000 and 5 000 dollars
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?
- Author was Featured
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 3-4 years
- Item was Featured
- Referred between 1 and 9 users
- Singapore
- Sold between 10 000 and 50 000 dollars
- Won a Competition
You can use HTML function of jquery to replace entire HTML content of a div – http://api.jquery.com/html/
There are few more ways in jQuery to do that.
- Microlancer Beta Tester
- Sold between 1 000 and 5 000 dollars
- Most Wanted Bounty Winner
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 2-3 years
KamilWaheed said
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?
+1
- Australia
- Bought between 50 and 99 items
- Has been a member for 3-4 years
KamilWaheed said
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?
Thanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created. My question is how do I do this? (making it visible and invisible)
- Author had a Free File of the Month
- Author was Featured
- Bought between 50 and 99 items
- Exclusive Author
- Has been a member for 3-4 years
- Pakistan
- Sold between 1 000 and 5 000 dollars
cgruber said
KamilWaheed saidThanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created. My question is how do I do this? (making it visible and invisible)
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?
I would recommend you to use jQuery to achieve your target easily.
Here’s how to do this:
Add the following line inside head tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Put the 3 buttons inside a div like this and assign them ids :
<div id="buttons">
<a href="#" id="0" class="mybutton myred">Div 1</a>
<a href="#" id="1" class="mybutton myblue">Div 2</a>
<a href="#" id="2" class="mybutton myblue">Div 3</a>
</div>
Same thing for the pages, like this:
<div id="pages"> <div id="1" class="mydivshow">...</div> <div id="2" class="mydivhide">...</div> <div id="3" class="mydivhide">...</div> </div>
Then, add the following lines inside the body tag.
<script type="text/javascript">
var buttons = $("#buttons").find("a");
$("buttons").click(function() {
var id = $(this).attribute("id");
$("pages id").css("display", "none");
$("pages id:eq("+id+")").css("display", "block");
});
</script>
- Microlancer Beta Tester
- Sold between 1 000 and 5 000 dollars
- Most Wanted Bounty Winner
- Bought between 10 and 49 items
- Exclusive Author
- Has been a member for 2-3 years
- Has been a member for 0-1 years
Hi KamilWaheed,
Thanks for the solution and I could imagine it can do the trick easily..! Unfortunately I cannot get it to work after following all the procedures you’ve provided…
When I click the buttons, nothing happen except the page refreshes…
This is the code:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1 .0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Untitled Document</title> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<style type=”text/css”> .mydivshow {display:block;} .mydivhide {display:none;} .mybutton myred {color:rgba(251,24,2,1);} .mybutton myblue {color:rgba(44,0,235,1);}.mybutton mygreen {color: rgba(38,253,54,1);} </style>
</head>
Div 1 Div 2 Div 3 ... ... ...<script type=”text/javascript”> var buttons = $(”#buttons”).find(“a”); $(“buttons”).click(function() { var id = $(this).attribute(“id”); $(“pages id”).css(“display”, “none”); $(“pages id:eq(“id“)”).css(“display”, “block”); }); </script>
I am very junior in terms of web design… Hope to hear from you soon!
Sweetee
KamilWaheed said
cgruber said
KamilWaheed saidThanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created. My question is how do I do this? (making it visible and invisible)
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?I would recommend you to use jQuery to achieve your target easily.
Here’s how to do this:
Add the following line inside head tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Put the 3 buttons inside a div like this and assign them ids :<div id="buttons"> <a href="#" id="0" class="mybutton myred">Div 1</a> <a href="#" id="1" class="mybutton myblue">Div 2</a> <a href="#" id="2" class="mybutton myblue">Div 3</a> </div>Same thing for the pages, like this:
<div id="pages"> <div id="1" class="mydivshow">...</div> <div id="2" class="mydivhide">...</div> <div id="3" class="mydivhide">...</div> </div>Then, add the following lines inside the body tag.
<script type="text/javascript"> var buttons = $("#buttons").find("a"); $("buttons").click(function() { var id = $(this).attribute("id"); $("pages id").css("display", "none"); $("pages id:eq("+id+")").css("display", "block"); }); </script>
- Australia
- Bought between 100 and 499 items
- Exclusive Author
- Has been a member for 2-3 years
- Interviewed on the Envato Notes blog
- Microlancer Beta Tester
- Sold between 1 000 and 5 000 dollars
With select option.
http://jsfiddle.net/spliter/5xVDq/
- Has been a member for 0-1 years
Thanks for the prompt reply!
What about if I want to replace the selection function with 5 buttons at the top?
SportTipsWorld said
With select option. http://jsfiddle.net/spliter/5xVDq/
Request processing...