JavaScript - Load Css If Specified Text Not Present
I'm trying to create/find a script that will do the following:
-load a css file regardless of any conditions. -do not load the css file if a certain text is present in a specified html div tag. i know this is done with a if/else state like this: Code: if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } but I do not know how to add the condition for the variable text and to specify the css file. I want the javascript to ignore loading the css if a div tag like this: Code: <div class="menu-opener"><a class="gwt-Anchor" href="javascript:">Text1<img src=..//img.jpg"></a></div> contains the word Text1, or any other I specify. Else, if any other text inside the div, the css should load normally. I believe this is not difficult for a js knower and I would be very grateful for a solution. Similar TutorialsHi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right"> <script type="text/javascript" src="/js/main.js"></script> <div id="searchBox" class="searchBoxTopLevelNav"> <form name="search" id="search" action="search.php?"> <label for="q" style="display:none";>Site Search</label> <input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" /> <input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/> </form> </div> Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="#" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> our requirement is client wants to know howmany users leaving the main page without entering data in the application page.at that time we need to show the css popup overlay. in the following scenarios overlay should pop up. 1)when user leaves the page.(e.g. type other address in the address bar).bascially user shy away from the browser. 2)clicks browser close button. we will show one css popup overlay(not browser popup) and in the back ground main application will be greyed out.this overlay consists of some text fields and some buttons will be there and parallely in the back ground we will execute AJAX call. can we accomplish this requirement??is yes how?will it work in all browsers? my concern is how to prevent the browser from closing(e.g.when user chooses browser X button) when css overlay comes up. I'm setting up an application that involves blog posts with comments boxes appended to the div that contains the posts. The comments boxes are in iframes and load an html file on the same domain. There are multiple posts/boxes on each page. I need a javascript that will only run the append script when the posts are written and appear on the page. So in non js language, I'm looking for this: if div id post#5 appears on the page, show the iframe that contains the comments box that goes with post number 5. else don't show it. I don't know enough javascript to figure this out so if anyone could point me in the right direction, I'd be grateful. Sorry for my beginner question but I am having some trouble getting this to work. I am trying to create a simple I=PRT calculator so it can calculate interest. But when you run it it adds the digits. Ex. 5+100=5100 instead of 105. Give it a try. My code is bellow.[CODE] // JavaScript Document alert("This is a simple calculator which will allow you to calculate the interest on a principle."); var principle = prompt("What is the amount you would like to calculate interest for?"); var rate = prompt("What is the interest rate. eg. For 3.9% write 3.9"); var term = prompt("How long in the period under calculation going to be? eg. For 1 year write 1"); var interest = principle*(rate/100)*term; var result = principle + interest; var a = "This means the interest is going to be $"; var b = " And the total to be paid is $"; var c = a + interest + b + result; alert(c); [CODE] Thanks in advance. How do I replace the string "rpg" only present in between <et> tags ? Code: <et>ReplaceOnlyrpg</et> After replacement it should look like this Code: <et>ReplaceOnly</et> Any advice is appreciated. Thank you Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab"> <h2>Australia_____</h2> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC"> <caption class="highlight_Red">澳洲 Australia </caption> <tr> <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc the other tabs look the same. LT i need a javascript that will show LOADING in the top left or top right corner of the page until the entire page is completely loaded because the page is VERY VERY VERY long.... and it takes a while on 56kbps because it has so much text.... like in Google's GMAIL, it has the red and white Loading text in the top right until the page loads... can someone refer me to such a script?
This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> Hi guys, I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true"> $('#query').autocomplete({ serviceUrl:'service/autocomplete.ashx', minChars:1, delimiter: /(,|;)\s*/, // regex or character maxHeight:400, width:250, deferRequestBy: 0, //miliseconds params: { country:'Yes' }, //aditional parameters // local autosugest options: lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values }); </script> It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript"> fields = 1; function addMore() { if (fields = 1) { document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>"; fields = 2; } else if (fields = 2) { document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>"; fields = 3; } else { document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed."; document.form.add.disabled=true; } } </script> Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi Guys, A client has given me some code but i need to add some code to it so it loads a URL along with the rest of the code. Below is the javascript code i need to work with, i know its to do with Google Tracking (Dart) but i dont understand it as I've never done JavaScript befo Code: <script type="text/javascript"> function dart_tracking(callback) { // Google Conversion Tracking var img = new Image(); img.src=" https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0 "; var img2 = new Image(); img2.src=" https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0 "; _gaq.push(['_trackEvent', 'subscribeButton', 'clicked']); if (typeof callback != "undefined") { setTimeout(callback, 1500); } } </script> Now the above code loads up when a subscribe button is clicked on my clients webpage, now how do i go about adding code to this so lets say http://www.Google.co.uk is loaded too? Any help would be great. Thank you! Hey, I'm trying to make a game, I learned how to do so by reading tutorials but the problem is that I do not know how to implement the save/load function into the game, the tutorial surrounding that area was very unclear to me, and here I am... Any tips on how to make this work is greatly appreciated, I wouldn't asked if I hadn't tried my best and every way I could think of. I'm still quite new to coding so... The first piece of code is the game, the second one is what I'm trying to make the game work with. I tried for a while and got the game to reset back to values, but only the values I set in the code so it never actually worked. The tutorial doesn't give any live examples and I really am... not that bright when it comes to coding Sorry and thanks, all inputs are appreciated. I read tutorial from links below, Javascript String Compression | Almost Idle Tutorial for save code Incremental Lesson 9 - For Loops | Almost Idle Tutorial for the game code Code: /*Pleae refer to Lesson 9.txt for a full description on this lesson*/ //The timer to run code every second var Timer = window.setInterval(function(){Tick()}, 1000); var buildings = []; //The object declaration for game saves function GameSave() { this.money = 0; this.buildings = []; for (var i = 0;i < buildings.length;i++) { this.buildings[i] = 0; } } //The object declaration for buildings function Building() { this.Name = "Lemonade Stand"; this.Cost = 10; this.PerSec = 1; } //The function to initialise all buildings function InitBuildings() { LoadBuilding("Lemonade Stand",10,1); } //The function to automatically load a building into the buildings array function LoadBuilding(name,cost,persec) { var cur = buildings.length; buildings[cur] = new Building(); buildings[cur].Name = name; buildings[cur].Cost = cost; buildings[cur].PerSec = persec; } //The function used to gather money function GatherMoney() { game.money++; //++ tells javascript to add 1 to the variable //Display the player's current money document.getElementById("money").innerHTML = game.money; } //The function that gets run every second function Tick() { for (var i = 0;i < buildings.length;i++) { game.money += game.buildings[i] * buildings[i].PerSec; } document.getElementById("money").innerHTML = game.money; } //The function to buy a lemonade stand function Build(id) { if (game.money >= buildings[id].Cost) { //Check if the player has enough money, then subtract it and add a new building if they do game.money -= buildings[id].Cost; game.buildings[id] = game.buildings[id] + 1; document.getElementById("money").innerHTML = game.money; document.getElementById("Building1Qty").innerHTML = game.buildings[id]; } } //Run this code once the page has loaded fully window.onload = function() { InitBuildings(); window.game = new GameSave(); }; Code: /*Pleae refer to Compression.txt for a full description on this lesson*/ function NewGame() { this.name = "Our Game"; this.description = "Our Game's Description"; this.numbers = []; for (var i=0;i<10;i++) { this.numbers[i] = i; } } var Game = new NewGame(); window.onload = function() { var SaveGame = JSON.stringify(Game); SaveGame = encode_utf8(SaveGame); SaveGame = lzw_encode(SaveGame); window.localStorage['SaveName'] = SaveGame; SaveGame = window.localStorage['SaveName']; SaveGame = lzw_decode(SaveGame); SaveGame = decode_utf8(SaveGame); window.GameTwo = JSON.parse(SaveGame); document.getElementById("name").innerHTML = "Name: " + GameTwo.name; document.getElementById("desc").innerHTML = "Description: " + GameTwo.description; var numbers = ""; for (var i=0;i<10;i++) { if (numbers.length == 0) {numbers = i;} else {numbers += ", " + i;} } document.getElementById("numbers").innerHTML = "Numbers: " + numbers; } // LZW-compress a string function lzw_encode(s) { var dict = {}; var data = (s + "").split(""); var out = []; var currChar; var phrase = data[0]; var code = 256; for (var i=1; i<data.length; i++) { currChar=data[i]; if (dict['_' + phrase + currChar] != null) { phrase += currChar; } else { out.push(phrase.length > 1 ? dict['_'+phrase] : phrase.charCodeAt(0)); dict['_' + phrase + currChar] = code; code++; phrase=currChar; } } out.push(phrase.length > 1 ? dict['_'+phrase] : phrase.charCodeAt(0)); for (var i=0; i<out.length; i++) { out[i] = String.fromCharCode(out[i]); } return out.join(""); } // Decompress an LZW-encoded string function lzw_decode(s) { var dict = {}; var data = (s + "").split(""); var currChar = data[0]; var oldPhrase = currChar; var out = [currChar]; var code = 256; var phrase; for (var i=1; i<data.length; i++) { var currCode = data[i].charCodeAt(0); if (currCode < 256) { phrase = data[i]; } else { phrase = dict['_'+currCode] ? dict['_'+currCode] : (oldPhrase + currChar); } out.push(phrase); currChar = phrase.charAt(0); dict['_'+code] = oldPhrase + currChar; code++; oldPhrase = phrase; } return out.join(""); } function encode_utf8(s) { return unescape(encodeURIComponent(s)); } function decode_utf8(s) { return decodeURIComponent(escape(s)); } Reply With Quote 01-16-2015, 05:52 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts the problem is that I do not know how to implement the save/load function into the game save it where? that particular question is important as JavaScript has only limited places where it can save something at all. 1) save it on the server => call a server script with the appropriate data (e.g. via AJAX) 2) cookies, very limited storage space, only works on the same browser 3) WebStorage, more space than cookies, but still only the same browser 4) IndexedDB (same as above) Hi to all I have a javascript code that when a page loads, some contents must be load within a given div tag. But the problem is that this javascript code sometimes work an somtimes Not work. What's the problem? Thank You... I want this script to load after the page load the script is: Code: <script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script> the script in My page is like: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My test page</title> </head> <body> <h1>Tony</h1> <h2>Welcome Tony Website</h2> <script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script> <h3>Tony is ... and is....</h3> <h3>He will....</h3> </body> </html> So how can I make this script loads after all elements of My page are loaded and without changing it's position (the script position)? okay, im using this script to close a DIV, can i somehow link it so that it loads main.swf when the div is closed? Now the SWF is running in the bg. Code: <script language=javascript> <!-- function hideDiv(){ if(document.getElementById('Div').style.display != "none") { document.getElementById('Div').style.display = "none"; }} //--> </script> Code: <a href=# onclick="javascript:hideDiv();">Close</a> Hello, I have been looking for a good walk-through online, but can't seem to find an exact resolution to what I am trying to do. Can someone please supply some example code for not displaying everything that is inside a <div>. Basically I do not want social media content to be displayed on secure pages, but want them on every other page. This is what I have: Code: <div id="share"> <ul> <li> <div class="addthis_toolbox addthis_default_style "> <a href="http://www.addthis.com/bookmark.php?v=250&username=###### class="addthis_button_compact">Share</a> <span class="addthis_separator">|</span> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> </div> </li> <script> var addthis_config = {"data_track_clickback":true}; if (document.location.protocol !== 'https:') { $jq.getScript('http://s7.addthis.com/js/250/addthis_widget.js?username=######', function() { }); } </script> </ul> </div> |