I'm currently developping a html-page for ipad with a css3-transition slider for various contents.
The problem i encounter is, that images on the next page, which aren't rendered yet, will be rendered while sliding them to the content area (though they are preloaded).
Is there any way to make the Browser render them, without displaying them at initial page request, to prevent the stuttered sliding effect on images?
/EDIT:
Slider I use: slider
structure is like:
<body>
<!-- wrapper -->
<div>
<!-- head -->
<div class="head"></div>
<!-- content area -->
<div class="content">
<div class="container">
<div class="pagination"></div>
<div class="slide-wrapper">
<div class="slide">
<!-- content with images here -->
</div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<!-- foot -->
<div class="foot"></div>
</div>
</body>
Image-Preloading:
function preload() {
$('img').each(function(){
$('<img/>')[0].src = $(this).attr('src');
});
}
This will force browser to preload all images
$('img').each(function(){
var image = new Image();
image.src = $(this).attr('src')
});
A general technique is to set them as visibility: hidden (inline style to ensure it is applied even before any external CSS is downloaded) - And setting it to visibility: visible on image.onload handler.
<img src="..." style="visibility: hidden" onload="this.style.visibility = 'visible';">
Edit
$('img').each(function(){
$(this).css('visibility', 'hidden');
$('<img/>')[0].src = $(this).attr('src');
$(this).load(function() {
$(this).css('visibility', 'visible');
});
});
Related
I am trying to use this a anime.js file as a background to a website banner. Here
<section id="banner">
<div class="inner">
<div class="logo">
<span class="icon fa-diamond"></span>
</div>
<!-- Animation Script -->
<!--
<script>
document.getElementById("banner").innerHTML = '<object type="text/html" data="animation/index.html"></object>';
</script>
-->
<h2>TEXT</h2>
<p>MORE TEXT</p>
</div>
</section>
I am loading the script like this but the problem is it replaces and loads the inner div completely. How should I make it load on the entire section? I also want the inner div intact.
The issue is because you're completely overwriting the HTML of the #banner element, and completely wiping out its existing contents.
To fix this create the object element separately, then use appendChild() to add it to the #banner element:
var obj = document.createElement('object');
obj.type = 'text/html';
obj.data = 'animation/index.html';
document.getElementById('banner').appendChild(obj);
<section id="banner">
<div class="inner">
<div class="logo">
<span class="icon fa-diamond"></span>
</div>
<h2>TEXT</h2>
<p>MORE TEXT</p>
</div>
</section>
I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.
<div class="header_slider">
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '32.882%',
minHeight: '50px',
loader : false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
// ]]></script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_1"></div>
</div>
</div>
<div data-src="{{media
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_2"></div>
</div>
</div>
<div data-src="{{media url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_3"></div>
</div>
</div>
</div>
<div class="clear"></div>
You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.
For example on the HTML
<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
And your Javascript
$('.clickMe').on("click", function() {
window.location.href = $(this).data('destination');
});
EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/
<div data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
I have a div loadContent in my main html, loading successfully with my external html, instead of loading the whole html i decided to load just 1 part of the div, but if i just load that one part, it won't link with my external css anymore.
my external HTML
<html>
<head>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="main.css"/>
<!-- JS
================================================== -->
<script type="text/javascript" src="portfolioAjax.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="sixteen full columns alpha omega">
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="http://i.imgur.com/5bGrqhU.jpg" alt="logo" img-title="Dog So Cute" img-desc="A bunch of cute dog lol" author-name="Andrew" author-special="IAT" author-about="just a normal guy" author-skills="photoshop and stuffs" author-email="andrew#hotmail.com" author-web="yahoo.com.sg" author-img="images/andrew.jpg">
<h2 class="caption">des<br />GAD Portfolio1</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic2.jpg" alt="logo" img-title="2 cute human" img-desc="err, 2 human." author-name="Daniel" author-special="IAT" author-about="mr simple" author-skills="know it all" author-email="daniel#hotmail.com" author-web="wikipedia.com" author-img="images/daniel.jpg">
<h2 class="caption">bee<br />GAD Portfolio2</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic3.jpg" alt="logo" img-title="i am scared" img-desc="please don't bite me">
<h2 class="caption">tee<br />GAD Portfolio3</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic4.jpg" alt="logo" img-title="look at my eyes" img-desc="i'm so cute">
<h2 class="caption">fee<br />GAD Portfolio4</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic5.jpg" alt="logo" img-title="well..." img-desc="i don't know what is this">
<h2 class="caption">foon<br />GAD Portfolio5</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic6.jpg" alt="logo" img-title="hi" img-desc="some candid shyt">
<h2 class="caption">yea<br />GAD Portfolio6</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic7.jpg" alt="logo" img-title="Sup friend" img-desc="ok can">
<h2 class="caption">ded<br />GAD Portfolio7</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic8.jpg" alt="logo" img-title="oh my god" img-desc="i forgot my clothes." author-name="Jassalyn" author-special="IAT" author-about="DUX Pro" author-skills="Everything" author-email="jess#hotmail.com" author-web="dux.com.sg" author-img="images/jessalyn.jpg">
<h2 class="caption">bef<br />GAD Portfolio8</h2>
</div>
</div>
</div>
</body>
if i just load the above file as a whole it works, but if i just load #content, the .js and .css will disappear. Any solution for it?
my Jquery
$(function() {
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content'); // js and css file gone
$('.loadContent').load('portfolio_gad.html'); // works fine since i import everything include heading
});
});
Please advise if u have a easier way that i should approach towards.
Summary to what i want to achieve.
main html load a div of external html(with js & css intact)
my approach: i duplicated the main css and js to let my external html link towards it since my main html and external html are almost the same, just different content. Not sure if i am doing this the right way please advise
You can load your content and use the callback function to load your JS and css. Something like this:
$(function() {
function loadJS( scrpt, fn ) {
var el = document.createElement('script'),
body = document.body;
el.type = 'text/javascript';
el.src = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
function loadCSS( scrpt, fn ) {
var el = document.createElement('link'),
body = document.head;
el.type = 'text/css';
el.media = 'all';
el.rel = 'stylesheet';
el.href = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content', function() {
loadJS('/path/to/whatever.js');
loadCSS('/path/to/whatever.css');
});
});
});
That is because the code you're executing (appended #content) would only load the HTML of the element with the ID set to content.
Since other elements don't have that ID they will be ignored while being downloaded. You can, however try to load the whole HTML page without the content element. Scripts and style techniques must be downloaded in order for them to work, but that code would never bother downloading any script or css file since you're not asking for it. You're just asking it to download the #content part.
You can somehow change your HTML to look like this,
<!-- HTML -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="link/toStylesheet.css" />
</head>
<body>
<div class="loadContent">
<!-- leave it empty initially -->
</div>
</body>
<script>
// Place your scripts here -->
// Load the content now -->
$(document).ready(function () {
$('.loadContent').load('portfolio_gad.html #content');
});
</script>
</html>
Now when you will download the HTML, the scripts and CSS will already be there. So you won't have to face the issue again.
I was assigned to do a photo gallery.
A big picture (1000x1000) in the middle, three little thumbnails picture(200x200) below it.
I was given this useful function
getBigImg(thumbnail); // Returns big image
We assume the CSS is already given for us and we do not need to worry.
<div class="big image">
<img src="big picture"/>
</div>
<div class = "thumbnails">
<div id="placement1> img src thumbnail 1 </div>
<div id="placement2> img src thumbnail 2 </div>
<div id="placement3> img src thumbnail 3 </div>
</div>
What I did is simple create 3 copies of the .HTML and do infront of each of the thumbnails. Whenever the user click on the image it will redirects to the .html where the big image is big image of the thumbnail.
I was told I can save all this hassle by using JQuery. What are they referring to?
you can do something like this example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".galImg").click(function() {
var image = $(this).attr("rel");
$('#feature').fadeOut('slow');
$('#feature').html('<img src="' + image + '"/>');
$('#feature').fadeIn('slow');
});
});
</script>
use this HTML: little bug fixes
<div class="big image">
<img class="bigImage" src="big picture"/>
</div>
<div class="thumbnails">
<div id="placement1" > <img src="thumbnail1" /> </div>
<div id="placement2" > <img src="thumbnail2" /> </div>
<div id="placement3" > <img src="thumbnail3" /> </div>
</div>
and add this to your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '.thumbnails > div', function(){
var img = $(this).find('img').attr('src');
$('.bigImage').attr('src', img);
});
});
</script>
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.