JavaScript - Load On Hover

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

Hi guys.

How would I implement this css:

Code:

.story-wrap:hover .dates

This obviously allows the .dates div to react when I hover over the .story-wrap div.

How would I select the same in javascript with this code:

Code:

$(".story-wrap .dates").hover(function () {

Because currently it just reacts when .dates is hovered over.

Cheers!

I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it.
Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right?

HTML Form:
Code:

<form>
			<table>
				<th>Recipe Quick Search</th>
				<tr>
					<td class="quickSearchHeader">Ingredient:</td>
				</tr>
				<tr>
					<td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td>
				</tr>
				<tr>
					<td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td>
				</tr>
				<tr>
					<td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td>
				</tr>
				<tr>
					<td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td>
				</tr>
			</table>
			</form>

Javascript Code:
Code:

<script type="text/javascript">

 var array = new Array();

  function insert(val)
  {
	if(val != "")
	{
		array.push(val);
	}
  }

  function show()
  {
  if(array.length > 0)
	{
		for(i = 0; i < array.length; i++)
		{
		document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
		}
	}

  }

</script>

I have two divs, one is the triggering and the other is the hidden one. Hovering the first div will show the hidden div. To hide the div the user must "mouseout" from this div, however if the user "mouseout" from the first div nothing will happend and that is the problem because if there are another group next to them, and the user pass from one triggering div to the next this will show the two hidden divs stacking over one another.

This is for a horizontal menu (something like www.oracle.com).

The actual code is this:

Code:

<div id="option_a"><p>FIRST OPTION</p>
    <div id="option_a_menu">
         **HERE ARE LIST, DIVS, IMGS**
    </div>
</div>
<div id="option_b"><p>SECOND OPTION</p>
    <div id="option_b_menu">
         **HERE ARE LIST, DIVS, IMGS**
    </div>
</div>

The JS:

Code:

function init() {
   oOptionA=document.getElementById("option_a");
   oOptionAmenu=document.getElementById("option_a_menu");
   oOptionB=document.getElementById("option_b");
   oOptionBmenu=document.getElementById("option_b_menu");
   //behaviors
   addEvent(oOptionA,'mouseover',goOptionA);
   addEvent(oOptionAmenu,'mouseout',outOptionAmenu);
   addEvent(oOptionB,'mouseover',goOptionB);
   addEvent(oOptionBmenu,'mouseout',outOptionBmenu);
}

function goOptionA() {
   oOptionAmenu.style.visibility="visible";
}
function outOptionAmenu() {
   oOptionAmenu.style.visibility="hidden";
}
function goOptionB() {
   oOptionBmenu.style.visibility="visible";
}
function outOptionBmenu() {
   oOptionBmenu.style.visibility="hidden";
}

The user will hide the option A menu only when his mouse clears the div that showed up. However is he hover the triggering div and go just to the next triggering div (The second div) will trigger the visibility of their menu, but the previously menu will still on stage, stacking the two menus.

I was trying this to solve the problem:

Code:

...addEvent(oOptionA,'mouseout',goOptionA);

function goOptionA() {
   if (oOptionAmenu!=hover) {
     oOptionAmenu.style.visibility="hidden";
  } else {
    oOptionAmenu.style.visibility="visible";
}
}

However, this is not working, something is wrong with the "oOptionAmenu!=hover" but how can I do this ?

Thanks in advanced

Quick question,

I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image.

How would I get that effect?

Thanks!!!

Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer.

Note: I have a different function that uses toggleClass on these same elements

One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly.

html - Using jquery .hover, with $this - Stack Overflow


How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time?

Thanks.

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...

hi guys, i have some code, that is a percent bar that changes colour, it works fine, aprt from when i refresh the page and its still going, the bar resets back to the start, if anyone could help that would be great:

there is some php inside the javascript, to pick up the time left. that should be clear but if not its this:


the java script is this:

PHP Code:
".maketime2($fetch2->lastcrime)." 


Code:

<script language='JavaScript' type='text/javascript' src='/js/countDown.js'></script>
		<script>
		
		var sl = 60;
		var ts = 60;
		var r = 125;
		var g = 0;
		var b = 0;
		
		function updBar(f){
			
			var percent = 1 - (sl / ts);	
			var bar = document.getElementById('percentBar');
			
			if(percent < .5){ g += 125 / ts * 2; }
			else { r -= 125 / ts * 2; }
			
			if(r < .1) r = 0;
			
			bar.style.backgroundColor = 'rgb(' + Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b) + ')';		
			bar.style.width = 300 * percent;
			
			sl -= 1;
			
			if(sl >= 0) setTimeout('updBar()', 1000);
			else document.getElementById('recovering').style.display = 'none';
				
		}
		
		var no_timeleft = 'None';
		//bootloaderAdd('countDown()');
		bootloaderAdd('updBar()');
		bootloaderOn();
		
		</script>

	<div id='recovering'>

		<table width=400 cellspacing=0 cellpadding=2 class=sub2>
		<tr>
		<td height=100 align=center valign=center>
		
		You are currently recovering from your previous crime...<br><br>
		
		<span id='timeleft' style='font-size:16px;'>".maketime2($fetch2->lastcrime)."</span><br><br>
		
		<table width='300' style='background-color:#333333;'>
		<tr>
		<td>

		
		<span style='width:300px; background-color:#333333; text-align:left;'>
		<div id='percentBar' style='background-color:rgb(125, 0, 0); font-size:11px; text-align:right; width:0px;'>&nbsp;</div>
		</span>
		
		</td>
		</tr>
		</table>
	
		
		</td>
		</tr>
		</table>

		<br><br>
		</div>

if your wondering why there are no """ anywhere, its because this javascript is only active when there istime left and is echo'ed out by php.

Cheers.

Dan

I have a banner ad at the top of the page (created by javascript). It is sometimes flash, sometimes a div, sometimes just an image (the ad company determines this).

I need it to appear at the top of the page, but I want it to load AFTER all of the rest of the page content has loaded.

Here is a test page I've created to demonstrate this:
http://jeremymoritz.com/js-test.php

Here is the code with the javascript at the bottom so it will load last:
Code:

<html>
<head>
</head>
<body>
	<div id='ad_spot'>
		<!--ad needs to go here-->
	</div>
	<div id='content'>
		<!--Content-->
	</div>
	<div id='load_last'>
		<script defer='defer' type="text/javascript">
			var __fbr_pid  = "1746";
			var __fbr_bid  = "18281";
			var __fbr_sid  = "4568";
			var __fbr_size = "728x90";
			var __fbr_auid = "28762";
			var __fbr_zone = "";
		</script>
		<script type='text/javascript' src='http://ads.foodieblogroll.com'></script>
	</div>
</body>
</html>
</div>

I've tried many things to fix this, but the javascript usually creates elements (iframes, divs, etc.) that are OUTSIDE of container div so manipulating the dom (to move the div or its contents to the <div id='ad_spot'>)has yielded unexpected results.

Thank you in advance for your help!

Hi,
Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash.
Can someone tell me what's wrong?
Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html

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!

I am a middleware developer for a design and manufacturing software. We recently have gone from using Crystal reports to using xml based reporting. I am just begining to write reports using xsl, css and java script and transforming to html. The report I am working on has several tables each in a separate div. These tables are populated based on the xml file output form a job file. Base on job settings one or more tables may have no information in them. What I would like to do is hide the divs with empty tables when the page is loaded. I have looked through the forums here and on other sites and have found perhaps hundreds of examples of java script for showing and hiding divs with user input or by being set to a hide state by default. However I need it to be more dynamic. I think this can be done with java script but not sure hopefully someone can help me.

Thanks
PShorty

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)

My webpage won't load at all in Safari, unless I open it as a link from anbother site or if I manually type in the index.html after the url.

when I take out the javascript though, it work perfectly.

I always works in Firefox though.

Any hints:


<script type="text/javascript" src="stuff/x_core.js"></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="stuff/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-*******-*");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
var start_z_index = 3000;
function bringtotop( item )
{
item.style.zIndex = start_z_index++;
}

</script>

<script type="text/javascript" src="stuff/x_event.js"></script>

<script type="text/javascript" src="stuff/xenabledrag.js"></script>
<script type="text/javascript" src="stuff/xenabledrag2.js"></script>

hi


i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files)

Now what i need is, onclick of HOme button.. i have written a code like
<a href="main_Home.html" onclick="updateObject(this); return false;">

and the javascript i got from dhtml goodies is

<script type="text/javascript">
function updateObject(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
</script>

now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there..

Pls help..