Like the title says, a page I'm working on is firing a hover event on page load.
Javascript
// Random Color Function
var repeater;
function rnd_color(){
document.getElementById('logo').style.fill = '#'+Math.floor(Math.random()*16777215).toString(16);
repeater = setTimeout( function(){ rnd_color(el) }, 100);
};
// Logo Hover
var logo = document.getElementById('logo');
logo.addEventListener('mouseover', rnd_color, false);
logo.addEventListener('mouseout', function(){
clearTimeout(repeater);
this.style.fill = '#000';
});
The above is of course wrapped in a 'DOMContentLoaded' wrapper.
HTML
<svg class='menu-logo' id='logo' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 105.5"> <!-- PATHS AND FILLS HERE --> </svg>
So this function is just a fun easter egg - once you hover over the svg, it fires off a new fill color every 1/10 of a second. Everything else about it works just fine except that, upon loading the page, the color function immediately begins running. Once you move the mouse at all, the appropriate 'mouseout' event takes care of refilling the svg to #000.
Even stranger, upon loading a cached version of the page, the error disappears. This only appears to happen on a completely new load of the page. Any possibility that this is a race condition of some sort even though this is wrapped in the appropriate Event Listener? Thanks!
I won't say that I found a completely supported answer per se, but I did find the cause of my problem which, unfortunately, was not necessarily included in the statement of my question.
This element in question resides at 0,0 on my viewport. It's a large fixed logo that fits into a table-like layout. It would appear that, in certain instances of loading the site such as an incognito or cache-less view (the latter being somewhat inconsistent), the initial cursor position prior to the mouse moving is always set at 0,0 until the mouse has moved.
This raises some questions on the consistency of where the cursor is located upon repeat views of pages and whether or not it can be set programatically. There are a couple of ways around it for now.
Related
As I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom most element as it is being loaded rather than loading them and having the view stay at the current view. So at the beginning it should be at the top of the screen and stay there instead of jumping to the bottom and as I scroll down and it renders more elements it should stay at that spot as well whilst the rest loads.
Here is the code of what is essentially in my js file.
function loadMultipleElements(amountToLoad, url) {
var parentDiv = document.getElementById("instance");
for(var i = 0; i < amountToLoad; i++) {
var iframe = document.createElement('div')
iframe.innerHTML = '<iframe src=\"' + url + '\"></iframe>';
parentDiv.appendChild(iframe);
}
}
Then how I'm loading it in the html file with infinite scroll from jquery,
<script>
loadMultipleElements(5, "https://www.example.com");
$(window).scroll(function() {
if($(window).scrollTop() == ($(document).height()) - $(window).height()) {
loadMultipleElements(5, "https://www.example.com");
}
});
</script>
So when I run this on my localhost it will have everything render as it opens but jump to the bottom of the screen to render it then jump back to the current view. The big problem here is because of infinite scroll and how it keeps jumping to the bottom it ends up going indefinitely because it keeps jumping to the bottom triggering the jquery function.
EDIT: Plunker included though not sure how to get jquery to do infinite scrolling with plunker at the moment so right now just have a fixed load value of 10. Even already it is scrolling to the bottom as it renders more.
http://plnkr.co/edit/fUrJek3RAicHG98lUrC9?p=preview
Your problem is caused by the fact that when bing automatically focuses the search bar, your browser scrolls down to the iframe so that you can type in text.
(See a "slow-mo illustration" here.)
The only workaround I know of is to use the iframe sandbox attribute - HTML5 only! - to prevent bing from focusing the searchbar. Then when the iframe is finished loading, we reallow JavaScript. Example.
There are, however, a couple of problems with this approach.
Since it works by disabling javascript when the iframe is loading, desired javascript functionality is also disabled. (ie. no 'recent stories')
It feels incredibly hacky.
It isn't obvious what we're trying to do.
PS: Here's what W3Schools has to say about the sandbox attribute and here's a walkthrough on html5rocks.
PPS: If anyone knows of a better way to do this, I'd love to hear it.
What is the difference between:
$(window).load(function() {
loadSlideShow();
});
and
window.addEventListener('load',loadSlideShow());
The function loadSlideShow() creates a slideshow; it waits for all of the images to load, and then adds the controls to the slideshow, in the middle of the image (it bases the position of the controls on the height of the image).
When using window.addEventListener, the controls would sometimes be added before the image had actually loaded. So the image height would be 0 and the controls would be placed at the very top of the slideshow, and not in the middle.
Once I changed to $(window).load, the error went away.
I'm not sure why there would be a difference between the two.
This code is implemented wrong which will make a difference:
window.addEventListener('load',loadSlideShow());
It should be:
window.addEventListener('load',loadSlideShow);
The way you were doing it would call loadSlideShow() immediately without waiting for the event. The corrected way will operate the same as your jQuery version.
First time asker, long time lurker.
I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.
That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.
Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.
But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.
There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.
Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML.
The code for both toggles is the same, just with the IDs switched around.
The script:
$('#left-toggle > a').click(function(c)
{
c.preventDefault();
c.stopPropagation();
$('#right-toggle').removeClass('toggle-active');
$('#left-toggle').addClass('toggle-active');
$(pricing_subscriptionID).fadeOut('fast', function(){
$(pricing_singleID).fadeIn('fast', function(){
});
});
});
The HTML for the toggles:
<div id="chart-toggle">
<div id="left-toggle" class="toggle-active">Single Pricing</div>
<div id="right-toggle">Subscription Pricing</div>
</div>
"toggle-active" is just for styling.
Any ideas?
It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.
JSFiddle: http://jsfiddle.net/TmrLw/
It's because of your link to #. Here are some ways you can fix this:
1. Replace "#" with something else
Instead of
Subscription Pricing
Try this:
Subscription Pricing
This will give you the cursor pointer you're looking for and avoid the page jump.
2. Create a class with the pointer effect
If you use this CSS rule:
.pointer {
cursor: pointer;
}
Then you can wrap your text with this class instead:
<div class="pointer">Subscription Pricing</div>
3. Remove the default effect of "#"
This Javascript will get rid of its default effect:
$('a[href="#"]').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
Hope this helps
Probably its because the link's href is # which links to the top of the document.
try to remove the href attribute
edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.
Hello,
I am building a website for a tv show that my friends and I make called Every Single Day.
here you can see the mock up of what I have so far:
http://www.uvm.edu/~areid/cs195/final/S/S.html
as of right now, the image I am using is just one big image that I sliced up with Photoshop.
What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.
I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.
I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.
Thank you very much, I am pleased to have joined this community,
cooper reid
Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)
Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/
This demo includes panning to specific frames.
var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs
$('.pan').click(function(e) {
e.preventDefault(); //prevent default action (of <a>)
if ($('.content div').is(':animated')) return false; //disable click while animating
var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
$('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});
$('#tv-right').click(function() {
if ($('.content div').is(':animated')) return false; //disable click while animating
$('.content div').animate({top: '-='+h+'px'}, 2000); //animation
//if last div then go back to the start
if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
$('.content div').stop().animate({ top: '0px' }, 1000);
}
});
Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/
Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.
Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).
Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/
I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.
Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.
I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.
Wrap everything inside the outer television in a <div>
Create seperate HTML pages that just has the HTML of the content that you want inside the television.
Use jQuery's AJAX get method to get the HTML for the page without refreshing it.
e.g. Your "single" image is in a <td> with ID "rightframe". So when rightframe is clicked, you might want to get the html of a page called single.html and put that inside the television (let's assume your <div> or <table> that has the code has ID content):
$('#rightframe').click(function() {
$.get('single.html', function(data) {
$('#content').html(data);
});
});
Edit: For the sliding part, you would have to create two separate tables/divs side by side, one for the current page, and one for the page that is being loaded. Then you could use a jQuery plugin like Slidy http://www.wbotelhos.com/slidy/ to transition between them.
Personally I think it would be much cooler if you could put an animated GIF of TV white noise on the television while the page is loading :)
Something along the following: http://jsfiddle.net/Vzdu7/
So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});