|
JavaScript - Cycle Through Style Sheets
We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated.
Code: <style type="text/css">
.al {display:none}
.ca {display:none}
.ct {display:none}
.ga {display:none}
.il {display:none}
.la {display:none}
.ma {display:none}
.mi {display:none}
.mn {display:none}
.mo {display:none}
.ms {display:none}
.nc {display:none}
.ne {display:none}
.nh {display:none}
.nv {display:none}
.ny {display:none}
.or {display:none}
.sc {display:none}
.tn {display:none}
.tx {display:none}
.va {display:none}
.vt {display:none}
.wa {display:none}
.wi {display:none}
</style>
<script type="text/javascript">
function showHide(cls, show) {
for (var i=0; i<document.styleSheets.length; i++) {
// browser-compatibility
var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
for (var j = 0; j < rule.length; j++) {
if (rule[j].selectorText == "." + cls) { //find css selector
rule[j].style.display = (show) ? 'block' : 'none';
}
}
}
}
function selAction(sel) {
for (var i = 0; i < sel.options.length; i++) {
showHide(sel.options[i].value, i == sel.selectedIndex);
}
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="3">
<select name="type" onchange="selAction(this);">
<strong><option value="et">
Please Select Your State:
</option>
<option value="al">Alabama</option>
<option value="ca">California</option>
<option value="ct">Connecticut</option>
<option value="ga">Georgia</option>
<option value="il">Illinois</option>
<option value="la">Louisiana</option>
<option value="ma">Massachusetts</option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota</option>
<option value="mo">Missouri</option>
<option value="ms">Mississippi</option>
<option value="nc">North Carolina</option>
<option value="ne">Nebraska</option>
<option value="nh">New Hampshire</option>
<option value="nv">Nevada</option>
<option value="ny">New York</option>
<option value="or">Oregon</option>
<option value="sc">South Carolina</option>
<option value="tn">Tennessee</option>
<option value="tx">Texas</option>
<option value="va">Virginia</option>
<option value="vt">Vermont</option>
<option value="wa">Washington</option>
<option value="wi">Wisconsin</option></strong> </select>
</td>
</tr>
<tr class="al">
<td>
No issues in your state at this time.</td>
</tr>
<tr class="ca">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ct">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ga">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="il">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="la">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ma">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mi">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mo">
<td> No issues in your state at this time. </td>
</tr>
<tr class="ms">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ne">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nh">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nv">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ny">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="or">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="sc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tx">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="va">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="vt">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wa">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wi">
<td>
No issues in your state at this time.
</td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
Similar TutorialsHi I have a built this Jquery code: http://blog.mehdi.biz/2010/02/vertic...ry-lovers.html I want the buttons to auto cycle insted of hovering can anyone help please? Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! Hi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
Hello all I have a problem implementing too JQuery tools; Cycle and Fullsize (together). I have uploaded an example over at: http://lawrencebrown.eu/jquery/index.html The problem is that only the first image pics up the Full size script, I have bene told by a friend to add the following into code into the cycle script: Code: after: function () {
*$("div.album img").fullsize();
}
I have tried putting this in different places from lines 19 to 43 on index.html with no winning results yet. Any help you can offer to the mark up between lines 19 to 43 would be great. I appreciate that their are plenty of other lightbox solutions that can solve this problem - I have even had a few up and running, however this is a specific request on this job to use Fullsize. Full size docs: http://www.addfullsize.com/ Cycle docs: http://malsup.com/jquery/cycle/ Thanks for you time Lawrence Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! I currently am using the jQuery UI DatePicker for my page. For each date that has an "event" listed for that day, the date is highlighted. The other part of my page on the bottom has a "previous" and "next" button. This is basic record selection/navigation pretty much, but I am new to Javascript. Is there an easy way to navigate through these? Any help would be majorly appreciated. Thanks I want to loop through a form containing various fields and replace them with values I have in a JS object. E.g. (1) <form id="theform"> <input type="text" name="field_1" value="" /> <input type="checkbox" name="field_2" value="" /> </form (2) object.field_1 = "Dave"; object.field_2 = ""; // empty as not checked, else holds value of checked one -- The problem is: what about checkboxes and <select> drop downs, and radios?? Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this? Issue 1 - Solved I have this workbook with multiple sheet. I need that the data from the mail sheet gets sorted to the other sheets based on the value in certain cells. https://docs.google.com/a/housing.co...it?usp=sharing IQT 3.0 is the main sheet The condition to copy the data is simple based on data if available in column I to N then the data in that full row should get copied to the sheets with the same name as these columns. multiple entries is possible if you look at the test data Row 2 has data available in 3 columns i,K&L now all the relavent data should get copied to the sheets with the same name as these columns & the data should go under the appropriate columns in these sheets. Issue 2 - Pending Need Help Each error sheet is worked upon by different teams is there a way to ensure that the status of the project in the main sheet cannot be made live till all errors for that particular project have the YES selected under Resolved & Passed by QC. If the Resolved & Passed by QC. are YES for each error in a particular project only then can the status in the main sheet be changed to LIVE & highlighted in green else it should show the status as PENDING only no colour. Once the Status is live then the project should be moved to the archive sheet & also removed from the error sheets so that the only projects visible are the ones pending to be resolved & sorted by process date. also need to ensure that no one except the sheet owner can delete the code or the sheet. Can anyone tell me how I can combine multiple sheets into one?
Can someone please tell me why my script doesn't work the way its supposed to? In google sheets If any cell in a row turns red then the firsts cell in that row turns red. its supposed to do the same with yellow and orange. with red always taking priority, so if theres a red cell in the the same row with a yellow or orange it will override the firsts cell with a red background. The yellow and orange codes don't seem to work at all. function MakeRed(){ var book = SpreadsheetApp.getActiveSpreadsheet(); var sheet = book.getActiveSheet(); var first_column = "B"; var first_row = 1; var last_row = sheet.getLastRow(); var last_column = sheet.getLastColumn(); var active_row = 1; var range_input = sheet.getRange(1,1,last_row,last_column); var range_output = sheet.getRange("A1"); var cell_colors = range_input.getBackgroundColors(); var color = "#ff0000"; for(var r = 0; r < cell_colors.length; r++) { var rowWoColA = cell_colors[r].slice(1); if(rowWoColA.indexOf(color)>-1) { cell_colors[r][0]=color; } else { cell_colors[r][0]="#ffffff"; } } range_input.setBackgroundColors(cell_colors);// update sheet colors } function ColorOfCol(){ var book = SpreadsheetApp.getActiveSpreadsheet(); var sheet = book.getActiveSheet(); var range_input = sheet.getDataRange(); var cell_colors = range_input.getBackgrounds(); if (cell_colors.length == 0) throw new Error( 'No data in sheet' ); // List of colors in priority order, default at end. var color = ["#ff0000","#ff9900","#ffff00","#ffffff"]; for (var r = 0; r < cell_colors.length; r++) { // check for all colors EXCEPT our default, the last in color[] for (var b=0; b<color.length-1; b++) { // -1 means not found, but 0 means found in first column, which we don't care about if (cell_colors[r].indexOf(color[b])>0) { // found this color, stop searching, with 'b' == found color break; } } // 'b' will contain the color index. If none found, it will be the last color, our default. cell_colors[r][0]=color[b]; } range_input.setBackgrounds(cell_colors);// update sheet colors } Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element hi internet! I got a problem here, there are three 'onmouseover' event, in the first, I put the style in the inline,it works; but the others don't work when use css. how to get it work without inline style ? Quote: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div{width: 100px; height: 30px;margin-bottom: 20px;} .blue{background:blue;} .green{background:green;} </style> </head> <script type="text/javascript" > function tdcc(tdcolor){ document.getElementById("x").style.color=tdcolor.style.backgroundColor; } </script> </head> <body> <div style="background:red;" onmouseover="tdcc(this)"></div> <div class="blue" onmouseover="tdcc(this)"></div> <div class="green" onmouseover="tdcc(this)"></div> <br /><br /> <textarea id="x">sdfsdgsdfsdfsdsdfdsfsdfsdf</textarea> </body> </html> Hi, I am trying to remove the padding-bottom from the last 2 <li> in my page using JQuery, here is the code I have written so far: Code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#content .photos li").eq(-2).css("padding-bottom", "0px");
</script>
Hi im a newbie to java so please don't laugh. And apologies in advance for my English. When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes. here is a preview http://boyswithbeards.net/xrc/pres/ I have something like this. <iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe> <script type = "text/javascript"> var iframe = document.getElementById('MoinkOriginal'); if (src='home.html') { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "0px"; // or use px iframeElement.style.width = "500px"; // or use px iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } else { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "300px"; iframeElement.style.width = "500px"; iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } </script> Thank you for helping me. Im stuck on this for days. hello, I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom, the plain drop down box has (nomal/bold/italic/bold-italic) the large drop down box has (large/medium/small) can someone please guide me or provide me a little demo on how to get this working?> thanks Hi all, On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is? Thanks in advance! Kyle May I put some style to an alert box ? for example . <html> <head> <style> #box { font-style: strong } </style> <script lenguaje="javascript"> var age; age = prompt("Type age : ", ""); if (edad<18) { <div id=box alert("Underage, get out !")> </div> } else { alert("You are Welcome, surf it it"); } </script> </head> </html> Thanks |
|||||||