I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after loading the content.
The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.
So, I have gathered some code and copy pasted a bit and this is what I came up with:
<div id="social_media">
<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />
</div>
The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)
I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!
Thanks and greetings from Amsterdam!
avoid the inline code try
<div id="social_media">
<img src="icon.png" alt="Show Social Media Buttons!" />
</div>
attach a mouseenter event handler to the img
$(function(){// short cut of $(document).ready(); read more on google
$("#social_media>img").bind({
mouseenter:function(e){
$('#social_media').load('external_file.php');
}
});
});
P.S the selectors are not optimized nor the outcome of this code it was just to give you an idea
DEMO
The answer to your real question is "the code is kinda middling." The reason the icon went away is because when you called load you replaced it. Internally your document is a tree of piece of the document called the DOM, for "document object model" -- abusing terminology, since that tree is actually an expression of the model, not the model itself.
There's a node in that tree that is your div, and it contains a node with the icon img. When you do the load(), that node is replaced with what you loaded.
As #john says, it's undesirable to put code like that inline, because when you want to figure out what it's doing later, it can be hard to find.
Several things to note:
You really should avoid inline JavaScript code in HTML, that's not clean at all. Move it to an external JavaScript file of possible, or, at least, in a separate <script> tag. It will be ways easier to maintain.
Using this method to fire the event only once seems odd. You should use the jQuery one method, which is made exactly for that.
The icon just disappears because the load method replaces the content of the div in which the icon is.
For example, IMO, the code should be:
$('#social_media').one('mouseover', function(){
$(this).load('external_file.php');
});
Related
I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.
I have a script set up that is running fine, but it takes a while to load and I would like to use a "loading" image before the script loads so that the user is not lost.
Currently I am using this in my HTML
<div style="text-align:center;">
<a style="color:blue;" onclick="javascript:launchWS('http://clients.mindbodyonline.com/ws.asp?studioid=888888&stype=-9&sView=day&sTrn=2');" href="#">Book Online</a>
</div><br />
I have been trying to add various snippets of javascript I have found around the web into the onclick"" but it breaks the functionality of the root code.
My guess is that I need to write the whole thing out with javascript, but I'm lost on where to even begin. Everything I find assumes you have a firm grasp of how to implement javascript. Unfortunately, I'm just a beginner, but I would really like to get this working.
First they way you are writing code is not wrong but it recommended to use script tag and write your javascript code there.
We use
$(ready).document({})
to run the javascript after page load so do not use this one may be helpful for you.
What I understand is that you need to show a spinner till the script is loaded-
There are multiple ways to go about this-using a image to block UI until script loads etc.
But the easiest way is to use a plugin -Spin.js found at http://fgnass.github.io/spin.js/
Hope this helps.
i have a php page with an Jw audio player, and have around 5500 links, on each link's onclick event a javascript function is attached. php is producing the exact relative path and name of files and is then passed to javascript.
<a class="items" href="#"
onclick="play1('<?php echo $fname."'".","."'".$f; ?>');return false">
<?php echo($fname);?>
</a>
initially i wrapped it inside <li>, had a image inside this, and the above <a>. My page(Obviously) is slow, the player takes time to load the files, i have removed the <li> tags now, its plain simple 5500 <a> tags now, page is much more responsive now.
I want to what is that thing that causes the page to became slower, is it simply so many links inside <li> or the javascript function attached to it.
What would be the most efficient way to handle this situation, what could be the lightest tag that i can use, so that i can minimize the overhead as much as possible?
Thanks.
I think the main issue is having that many links on a page to begin with, and then whatever overhead you have on top of that - javascript, headers from server to browser, etc. The only way to make something like that quick is to generate the page simply with <a> and <br/>s.
Saying that, the JavaScript would have added to the overhead a bit to, slowing it down, the rendering of the <li> elements, the player loading, sending the music (I assume it's video or music) to the user, loading it's content into the browser, etc. Usually, these things - minus the player loading and streaming the content - can be done fast, but when you account for that many elements, it definitely will add up. The only way that page will get decent response times is purely using <a> and <br />, and having a separate page handle the actual media playing. I would suggest pagination though as mentioned in the comments, or something similar if you can get away with it.
Is your page still slow whith only <a> ? What was the structure of the page with <li> ?
You might get some performance improvement by using a single javascript handler on an element that is the parent of the <a>s, and let the event bubble to know which link was clicked. (See http://davidwalsh.name/event-delegate ..)
Is it possible to do something after the dom is ready but it is not rendered(White screen)
I would like to hide the contents from user and after some operations i would like to show the final picture.
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
Thanks
Here is how?
document.onload = function() {
//your codes
}
Unlike, window.onload this function runs after the DOM is loaded, so the manipulation is possible, but it does not require all the elements to be rendered.
Is it possible to do something after the dom is ready but it is not rendered
Browsers render the DOM incrementally as they parse the HTML into it. The state you describe will not happen naturally.
You can fake it such…
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
If you don't want to change every page because it is too much work, then too bad. Go and set up an external stylesheet that every page uses.
If you don't want to change every page because you only want the changes to appear on certain pages, then use a more specific selector.
That said, preventing content from displaying and giving users a white screen (or even a loading screen) is just going to turn people off and drive lots of them to another site. I wouldn't recommend doing this.
if you could use JQuery this one is called when the dom is ready but the page not loaded
$(document).ready(function(){
)};
I'll contribute my own 2 cents here.
With jquery, the $("document").ready() event fires after the DOM has been fully loaded(without images, that is) to your browser, but not displayed. So I think to achieve what you want, you'll have to input some handler function inside the ".ready()" method to handle whatsoever you desire to achieve.
Is that what you were looking for?
I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).
Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).
I would like a way of not loading images until they are visible on the page.
I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).
Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?
Thanks!
Maybe jQuery Tabs could do what you need, with ajax call on tabs...
How do you display your hidden divs?
One plan of attack:
Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.
As a method it's definitely got some downsides.
If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:
<img src="" data-src="/path/to/image" style="display: none" />
And then you can use Javascript to fill the src with the data-src:
$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).
I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.
Good luck! ;)
I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been...
Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...
Your only choices would be ajax on the on hand or doing something like this:
<img src="transparent.gif" alt="" rel="real image source" />
and then switch attributes when the divs become visible, so the image starts loading.
This works fine as well at least if you don't need google indexing them.
Hope that helps! :)
Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(
I was unaware of this previously, but LazyLoad does support triggering from events:
http://www.appelsiini.net/projects/lazyload
If anyone needs a hand on how I did this, let me know!