This is my first question on stack overflow and I'm new to javascript/jquery so i will try my best to explain my problem.
I have two images that are animated into the centre of the browser on the x axis and these work fine on loading of the page. My problem occurs when I resize the browser after it has loaded. The elements do not stay in the center of the browser and are off center until I refresh the page and it works fine again.
I was wondering if there are any techniques to eradicate this issue?
Website can be viewed at www.puzzletest.click
Thank you in advance.
<div id="fullpage">
<div id="section1" class="section">
<div>
<img src="img/softsellcloud.png" class="ss-cloud" alt="Soft Sell Online - Business Automation Software">
<img src="img/softselltext.png" class="ss-text" alt="Soft Sell Online - Business Automation Software">
</div>
<div class="caption">
<h1>Business Automation Software.</h1>
<h2>We Help Companies Work Smarter!</h2>
<img src="img/phone-log.png" alt="Phone Us Now">
</div>
<div>
<img src="img/scroll-arrow.png" alt="Scrolling Arrow" id="arrow1" class="arrow">
</div>
</div>
My javascript code is this...
$(document).ready(function() {
$('#fullpage').fullpage();
});
$(document).ready(function() {
$(".ss-cloud").animate({
left: $(".ss-cloud").parent().width() / 2 - $(".ss-cloud").width() / 2
}, 2000);
});
$(document).ready(function() {
$(".ss-text").animate({
right: $(".ss-text").parent().width() / 2 - $(".ss-text").width() / 2
}, 2000);
});
$(document).ready(function() {
$( ".caption" ).delay(2000).animate({
opacity: 1,
}, 3000, function() {
});
});
You need to use the .resize function so the script fires everytime you resize your window.
$(window).resize(function(){
// Your code here
});
see also:
https://api.jquery.com/resize/
Related
I'm using macy.js. When I'm trying to run my site on IE11 element with masonry doesn't work, but when I turn on and off "inspect element" magic becomes and suddenly it does work. Any idea how to trigger it right after website loads?
html:
<div class="col-10">
<div class="portfolio-component__images js-portfolio-component__images w-100 text-right">
<img class="portfolio-component__images--image" src="images/portfolio_1.png" alt="altTex"/>
<img class="portfolio-component__images--image" src="images/portfolio_2.png" alt="altTex"/>
<img class="portfolio-component__images--image" src="images/portfolio_4.png" alt="altTex"/>
<img class="portfolio-component__images--image" src="images/portfolio_3.png" alt="altTex"/>
</div>
</div>
js:
const Masonry = new Macy({
container: '.js-portfolio-component__images',
columns: 2,
margin: {
x: 24,
y: 24
}
})
I have just figured this out - maybe this would be helpfull for others. All I needed to do was adding a line of code which is recalculating method when images are loaded, method from documentation:
macyInstance.runOnImageLoad(function () {
console.log('I only get called when all images are loaded');
macyInstance.recalculate(true, true);
});
I have one simple questions i want to keep longer to show but what i try not working. i making something wrong probably.
My part of html
<div id="preloader">
<div id="status">
<p class="center-text">
test <br>test <img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
Js my part
// JavaScript Document
(function ($) {
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(400).fadeOut("medium");
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<div id="status">
<p class="center-text">
test<br>test<img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
I want to keep more longer preloader and status after load. I was settimeout or add to hide and show ready functions but nothing change it
Thank you
You used fade out for div#status, the div#preloader still there but you didn't see any after div#status fade out.
I suggest you should
$(window).load(function() {
setTimeout(function() {
//$("#status").fadeOut();
$("#preloader").fadeOut("medium");
}, 400);
});
If you want the div#preloader to remain on screen for longer, then just remove the fade out of div#status:
$(window).load(function() {
$("#preloader").delay(400).fadeOut("medium");
});
i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!
Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).
Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds
You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.
Program: Eclipse (Phonegap)
Phone: HTC Desire (2.2.2)
I've been playing around with the iscroll plugin for some time now but it seems i can't get it to work. When i test it in both the android emulator and my phone it keeps scrolling back to the the top. Also the LogCat gives the following line:
"Miss a drag as we are waiting for webcore's response for touch down"
Javascript:
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('scroll-content', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false});
setTimeout(function () { theScroll.refresh() }, 0);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
HTML:
<div id="wrapper">
<div id="main-content">
<div id="pages">
<div id="map" class="current">
</div>
<div id="camera">
<button class="camera-control" onclick="capturePhoto();">Capture Photo</button>
<div style="text-align:center; margin:20px 0 0 0;">
<img id="cameraPic" src="" style="width:50%; height: 50%;"/>
</div>
</div>
<div id="buzz">
<div id="scroll-content">
<ul id="your-tweets"></ul>
</div>
</div>
<div id="info">
<p>Informatie Evident</p>
</div>
</div>
</div>
</div>
I'm populating the list with tweets called in with JSON. Hope somebodey can help!
The full iScroll syntax is: iScroll(element_id, object options).
Options are here.
Among the options we have bounceLock (if set to true the scroller stops bouncing if the content is smaller than the visible area. Default value is false).
Hope this is what you were searching for
To keep it from scrolling to the top you will need to create the scroll object after the first time you "show" your element. To dynamically add data to this element and maintain a proper scroll with scrolling bars, you can use the following script after each time you add data to the list:
var myScroll = null; //set this initially
// Check if scroll has been created, if so, destroy and recreate
if (myScroll != null){
myScroll.destroy();
}
myScroll = new iScroll('call-list', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });
I wrote some jquery code (from one video tutorial) to make mousehover zoom effect like in google pictures.
I want to add some delay before zoom (0.5-1 sec), but I don't know how to do that!!!
I've tried a lot of methods with delay() or setTimeout(), but nothing helps!!!
I do not know why...
Here is the javascript code:
$(function(){
$.fn.popOut=function(user_opts){
return this.each(function(){
var opts=$.extend({
useId:"poppedOut",
padding:20,
border:0,
speed:200
},user_opts);
$(this).mouseover(function(){
// kill any instance of this already
$("#"+opts.useId).remove();
// make a copy of the hovered guy
var $div=$(this).clone();
// setup for prelim stuff
$div.css({
"position":"absolute",
"border":opts.border,
"top":$(this).offset().top,
"left":$(this).offset().left,
"-moz-box-shadow":"0px 0px 12px black",
"-webkit-box-shadow":"0px 0px 12px black",
"z-index":"99"
});
// store all of the old props so it can be animate back
$div.attr("id",opts.useId)
.attr("oldWidth",$(this).width())
.attr("oldHeight",$(this).height())
.attr("oldTop",$(this).offset().top)
.attr("oldLeft",$(this).offset().left)
.attr("oldPadding",$(this).css("padding"));
// put this guy on the page
$("body").prepend($div);
// animate the div outward
$div.animate({
"top":$(this).offset().top-Math.abs($(this).height()-opts.height),
"left":$(this).offset().left-opts.padding,
"height":opts.height,
"padding":opts.padding
},opts.speed);
// loop through each selector and animate it to its css object
for(var eachSelector in opts.selectors){
var selectorObject=opts.selectors[eachSelector];
for(var jquerySelector in selectorObject){
var cssObject=selectorObject[jquerySelector];
$div.find(jquerySelector).animate(cssObject,opts.speed);
}
}
$div.mouseleave(function(){
$("#"+opts.useId).animate({
width:$(this).attr("oldWidth"),
height:$(this).attr("oldHeight"),
top:$(this).attr("oldTop"),
left:$(this).attr("oldLeft"),
padding:$(this).attr("oldPadding")
},0,function(){
$(this).remove();
});
});
});
});
};
$(".productBox").popOut({
height:300,
border:"1px solid #333",
selectors:[{".productDescription":{
height:150
}
}]
});
});
And example HTML code:
<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
Can anyone help me to do that? besides, I think it is very useful script.
Thanks in advance!!!
This may be what you're looking for : hoverIntent jQuery Plug-in
The best example can be found at Pop Images like Google Images
Also take a look at the demo
If you want to copy the cloned object to your original div then you need to just following the steps:
add id to your original div & the following code above the respective code:
var old_box = $div.attr('id');
$div.attr("id", opts.useId)
.attr("oldWidth", $(this).width())
.attr("oldHeight", $(this).height())
.attr("oldTop", $(this).offset().top)
.attr("oldLeft", $(this).offset().left)
.attr("oldPadding", $(this).css("padding"));
add the following code above the mouseleave event:
$div.click(
function() {
$("#" + old_box).html($(this).html());
$(this).remove();
}
);