|
JavaScript - Change Layout Toggle Button
I'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page?
HTML <in Code: <input type="button" value="change layout" onclick="toggle()" /> JavaScript Code: var flag = 0; function toggle(){
if(flag==0){
document.getElementById("container").style.backgroundImage="blah.jpg";
flag=1; } else if(flag==1){
document.getElementById("container").style.backgroundImage="blah2.jpg";
flag=0; } }
Similar TutorialsHi Complete novice with Java so need some help please! I want to put a button on a website that when clicked changes the background. The button needs to be an image. For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off") I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click. I guess it needs an if/else statement but not sure. Thanks for any help!!!! Hello guys, first post so please be kind. Usually try and find a solution and edit to work for me but this time its a little trickier. I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page. ideally what I want is say 3 buttons. button1img button2img button3img <// that when clicked control <div id=target><this target content is now set to 2></div> //and toggle between options and only one at a time can be on. The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page. if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently. i understand this is a little trickier, im hoping it is possible. cheers steve HI, I have a questions here. Can I change firefox/IE's min/max/X button lay out to lower right corner? I have a web app (let us say i have 2 pages input.php and output.php) when user enters data into input.php and click search output.php renders from server. But the user from anywhere on web should be able to close output.php by using lower right X button. (by default FF/IE has top right X button, may top left in case of MAC), in otherwords I need to change the output.php page NOT on a user machine but on server, so that each user get same lay out when access the page. Is it possible?? pls help me.. Thanks in advance... Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again. Code: <script type="text/javascript">
$(document).ready(function(){
$('.accordion-content').hide();
//toggle the componenet with class accordion
$('.accordion-toggle').click(function(){
//$(this).toggleClass('toggle-accordion-active');
$(this).next('.accordion-content').slideToggle(300);
});
$('#accordion-expand-all').click(function(){
$('.accordion-content').slideToggle(300);
});
});
</script>
Code: <p><a id="accordion-expand-all" href="#">Show</a></p> Hi, Im using a toggle script on my site. Im trying to add functionality. Currently, when you click on a toggle, that particular toggle expands and changes the toggle image. Ive made it so when you click the text on the top left, all the toggles open or close. However, the toggle image doesnt change (+ / -) Here is my code: Code: $(document).ready(function(){
$(".toggle_container").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("h2.trigger2").toggle(function(){
$(".toggle_container").slideDown();
}, function () {
$(".toggle_container").slideUp();
});
});
Here is my site: http://www.zombiemod.com/sm/test6.html Just to explain it better. When you click on the center toggles, the background image changes. When you click on "Web Design and Development" on the left, the background images dont change. Im trying to get it so it changes as well. Can anyone help with this? Hi, I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes. Code: <head>
<script language="JavaScript" type="text/JavaScript">
<!-- toggle off and on, currently unused -->
function checkAll(checkname, exby)
{
for (i = 0; i < checkname.length; i++)
checkname[i].checked = exby.checked? true:false
}
<!-- changes text on click, currently used -->
function exp(obj)
{
if(obj.oldText)
{
obj.innerHTML = obj.oldText;
obj.oldText = null;
}
else
{
obj.oldText = obj.innerHTML;
obj.innerHTML = 'Check All';
}
}
</script>
</head>
<body>
<div id="checkboxes">
<table bgcolor="#DCDCDC" cellpadding="10">
<tr><th colspan="11" align="left">
<a href="#" onclick="javascript:exp(this);">Clear All</a><br/>
</th></tr>
<tr align="center">
<td>Check1
<br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td>
<td>Check2
<br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td>
<td>Check3
<br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td>
</tr>
</table>
</div>
</body>
Thanks for reading! Kevin Hi, Hit a snag creating code for toggling with radio buttons, alert debugs return undefined for the radio button values. Would someone assist? HTML Code: <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
<label for="is_new0" class="artist_radio_label">Yes</label>
<input type="radio" name="artist" onclick="toggleForm(this.value)" value="new" />
<label for="is_new1" class="artist_radio_label">No</label>
From Document Head Code: <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Add a Print</title> <link rel="stylesheet" href="../c/forms.css" type="text/css" /> <script type="text/javascript" src="../j/global.js"></script> <script type="text/javascript" src="../j/add_print.js"></script> </script> </head> add_print.js Code: function toggleForm(artist)
{
if (!document.getElementById) return false;
var existing = document.getElementById("existing_artist");
var newArtist = document.getElementById("new_artist");
existing.style.display = "none";
newArtist.style.display = "none";
if(this.value == existing){
existing.style.display = "block";
}else{
newArtist.style.display = "block";
}
}
addLoadEvent(toggleForm);
global.js - Add Load Event Code: function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent();
Delete.
Hi Coders, I was wondering if anyone knows how you would create a link when clicked will change the width of the content. I have a feeling this will use jQuery? E.g. A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'. When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand' Thanks in advance! Haydn. Is it possible for JavaSscript to toggle a submit button? I will be using it in this code: Code: <SCRIPT type="text/javascript">
if (document.forms["form"]["quantitys"].value > '.$row['quantity'].') {
alert ("The quantity you wanted for product '.$row['id'].' is no longer available and will be changed to the highest available quantity.");
document.forms["form"]["quantity"].value = '.$row['quantity'].';
// JAVASCRIPT TOGGLE SUBMIT
}
</SCRIPT>
The submit button: <INPUT name="submit" type="submit" value="UPDATE QUANTITY"> I have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example... http://www.codekraken.com/dashpad/testing/test2.html How can I get the toggle button to slide with it, but not disappear? I am a beginner with coding and have no idea what I'm doing. Hopefully I'm posting this on the right forum. I have just registered a domain for my business and am maintaining my webpage through tumblr. I have stumbled around into finding a code that will allow me to hide/collapse certain content. The problem is that I want it to become an icon that changes from a "plus" to a "minus" sign, or any one character to another, as opposed to having it be the title that gets clicked on in order to be expanded. One major issue I'm having revolves around content expanding where a link is displayed. I am coding this on the "links" section of my page, which is links to other businesses and webpages I support. So, for example, I'll have a link to a business, and the hidden content will be something I have to say about it, that the person viewing can chose to read by clicking to expand content. I want it hidden by default to take up less space. This is the code I put into my head section: <!-- COLLAPSIBLE TEXT --> <!-- This goes into the HEAD of the html file --> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2005, Sandeep Gangadharan --> <!-- For more free scripts go to http://www.sivamdesign.com/scripts/ --> <!-- 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> And this is what the html looks like, which I've placed within a table (the list of businesses/pages I support or recommend): <td width=[]> <h2><u>[list name]</u></h2> <p> <a href="http://[link to business].com">[name]</a> <br> <div onClick="openClose('a3')" style="cursor:hand; cursorointer">∇</div> <div id="a1" class="texter"><font style="font-size:90%" color="maroon"> [hidden content]</font></p></div> Is is possible for me to place some kind of code where I have the ∇ that will switch between two icons when shown/hidden? Do I have to use a completely different script? Also, is it possible to keep both a link and a toggle icon on the same line without a break, yet have them lead to different places? Maybe this is more difficult than I think it should be, but I really cant find a good script on the internet for this. Any help would be appreciated. Thanks. plzz help!!!! i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table.. Requirement: -design a page to keep the track of payments -select box which holds two types (payments /adjustments) -data when submitted to be saved in the table -by default "all" radio box to be checked if payment radion button is checked the fields of nly payments to be displayed if adjustments radion button is checked the fields of nly adjustments to be displayed - this the code i developed soo far [CODE] <html> <head> <title> Payments/Adjustments </title> <script> var num1=0; function Output(srcHolder) { alert("haiiii"); //var srcTable = document.createElement("resultTable"); srcTable = document.getElementById("resultTable"); srcTable.deleteRow(srcTable.rows.length-1); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.type.value+"-"+f.name.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.amount.value; num1=f.amount.value; var total=add(); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = "amount"; tmpCell = tmpRow.insertCell(); tmpCell.innerText = total; srcHolder.appendChild(srcTable); if(flag==1) { tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; } } var sum=0; function add() { num1=parseInt(num1); sum=sum+num1; return sum; } </script> </head> <body> <form name="f"> <table align="center"> <tr> <td> DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/> </td> <td> For:<input type="name" id="name" title="Entername" size="40" /> </td> <td> Amount:<input type="name" id="amount" title="amount" size="10" /> </td> </tr> <tr> <td colspan="3"> Type:<select name="type"> <option value="">--Select--</option> <option value="adjust" >adjustments</option> <option value="payments">payments</option> </select> <td> </tr> </table> <br><center> <input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/> <input type="reset" name="Cancel" value="Cancel"/> </center> <hr> <center> <label for="type">Type</label> <input type="radio" name="type1" value="pa"/>payments <input type="radio" name="type1" value="ad"/>adjustments <input type="radio" name="type1" value="all" />all <table border="3" id="resultTable"> <thead> <th>Date </th> <th>For </th> <th>Amount </th> </thead> <tbody> <tr> </tr> <tr> </tr> <th> </tr> </tbody> </table> <div id="srcHolder" > </div> </form> </body> </html> [CODE] i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! can anyone give me a sample code for this situation ? - button A = labeled as Unlocked - when I on mouse over button A the label should turn into "Lock me ?" - and then when I click the button, the label will change to "Locked" I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
onclick="CB(document.getElementById('output').value); return false;"
</form name="I5" width="38" height="38">
How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >
Hi I'm trying to get button to change word + triangle. This ▼ or ▲ is Hex for triangle. I hard code this <input name="b" value="More▼" page loads, the value shown on button is "More and a triangle" (as I would like) but when I then do document.getElementById("moreBtn").value="Less▲" the button displays "Less▲"; (ie no triangle) why? Is this possible? very grateful If any body can explain. Low Tech Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
|
|||||||