My element has css scroll-behavior:smooth, which I'm using in order to smooth the hash "a href" links.
I want the page to first load on a fixed position on the page, which means it won't "smooth" the scroll on the first load to that position and only use it after.
I don't want to use any setTimeOut hack, I know that scrollTo has "options" that are widely supported, but I can't find any type of "behavior" that will override the css smoothness.
If I got your question right - Without any setTimeout - the first thing that pops my mind is to simply add using JS a class (like i.e: smoothScroll-init) to all the class="smoothScroll" elements:
HTML:
<div class="smoothScroll">Still not smooth...</div>
CSS:
/* Will be added by JS on DOM ready */
.smoothScroll-init {
scroll-behavior: smooth;
}
JS:
// DOM is ready
// Add class "smoothScroll-init" to all class "smoothScroll" elements:
document.querySelectorAll(".smoothScroll").forEach(EL => EL.classList.add("smoothScroll-init"));
If you're targeting a specific Element that you want to target and snap-scroll into view use: Element/scrollIntoView using the {behavior: "auto"} option.
Related
Am using animate.css library to apply animated effect on my website. But the problem is effect is applied as soon as page is loaded. And when I scroll to the element effect is already applied.
How can I set effect to be applied only when the element appear while scrolling?
You can use Waypoints – A javascript library that allows you to execute a function when you scroll to an element.
The basic Waypoint function in jQuery looks like this:
$("#element-to-animate").waypoint(function() {
// animation code
}
}, { offset: '100%'});
The 'offset' value determines at what point the animation is triggered.
Here is the guide to setting up and using waypoints.
You need to add wow.js and apply it. This will work when you scroll down to bottom.
To use it, add wow.js in head and add the wow class in the animated element.
<div class="FadeIn wow">
------
</div>
Get it Here. and read full documentation.
I'm using the jQuery resizable function on some divs on a page I'm working on. I also have some events that trigger an element to not be resizable anymore so I'm calling .resize('destroy');
however it seems like changing an element from resizable to not resizable is changing the css of the element and making it act strange. What css changes take place when an element becomes resizable?
when you apply .resizable()
your element takes position: relative;
When you call the resizable function on an element, you are adding classes to the element eg:
ui-widget-content ui-resizable
The css file which comes with the plugin has got style attributes referring to these new classes which essentially adds a corner image. This is the only thing I can see that changes visually in this jsFiddle.
I have a multiple div's which have a onmouseover action which generates the top for them .It is OOTB js file so I cannot change it .Is there a way that I can change the top values of the div elements with the same class to another value after the onmouseover event has fired .SO lets say this event creates the pop up with the top 123 and I want the top to be 23 .Is it possible .
Thanks
If you are talking about using jQuery UI to create dialogs on every mouseover event and you are trying to change the dialogs position by changing it's top property then you will need to use the dialogs position option like this:
$("#popup").mouseover(function(){
$(this).dialog({
position: [123,23]
});
});
This will create a dialog with a left property of 123px and top of 23px. Alternatively, if you insist on using the css method then you could do it to the div which is wrapped around #popup when the dialog is created:
$(".ui-dialog").css("top", "23px");
For more info on the dialog position option: http://api.jqueryui.com/dialog/#option-position
NOTE: This question is very ambiguous and since I can't comment yet, I have had to do a lot of guessing.. I was killing time :)
The idea is making some border-radius effect in IE 7/8, so I've decided to use jquery.corner.js library. To make it more generic I want to write some script which applies corner() function to all elements within a page having border-radius property.
For example, for this element
.someElement
{
border-radius:10px;
}
function must do the following
$(".someElement").corner("10px");
The problem is that I want to apply rounded corners to all elements, including dynamically added elements and elements which are inheriting border-radius property among some action(hover, click, etc.). Is this possible?
You need to declare a function that applies you css on every change.
To detect css style changes, see here:
Event detect when css property changed using Jquery
Then you need call that function on style change and on dom tree change (every time you append something into the page)....
I would advise you use a specific class to apply border radius css. This way you can select the rounded elements via jQuery class selectors.
You should have a generic css class that is used on all elements that have rounded borders and then use that class in your selector.
You will have to do this in a document ready handler. This will of course only apply rounded borders to elements that currently exists. If you want to cover elements loaded with ajax you can do the following:
$(document).ajaxSuccess(function(e, xhr, settings)
{
$(xhr.responseText).find(".class-that-applies-rounded-borders").corner("10px");
});
Hi im trying to make the Product Categories menu work on this page:
http://www.jaybrand.co.uk/p1.html
at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect.
i put some javascript to set the background position to the roll over on click, but this knocks out the CSS hover:
onclick="setStyle('c1','backgroundPosition','0px 0px');
it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE.
How can i write something in Javascript to also say:
onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');
......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?
When you set an element's style.backgroundPosition, it's the same as setting an inline style="background-position: ..." attribute. Since inline style attributes override stylesheet rules, the hover/non-hover rules can never again affect the background position.
You could remove the backgroundPosition rule for elements being unselected so that the stylesheet rules can shine through. But really, your code needs a serious refactoring: manually setting every background position in the onclick is ugly and unmaintainable.
Instead, switch a class around to flag the selected link, eg. styled like this:
.c { background: url(...); }
#c1.selected, #c1:hover { background-position: -276px 0; }
#c2.selected, #c2:hover { background-position: -276px -61px; }
...
markup:
<h2><a class="c selected" id="c1" href="#productcats">Products</a></h2>
<a class="c" id="c2" href="#rice">Rice</a>
...
(a-inside-h2 because the other way around is invalid.)
script:
var selected= $('#c1');
$('.c').click(function() {
// Move the 'selected' class to the new element
//
selected.removeClass('selected');
selected= $(this);
$(this).addClass('selected');
// Scroll target element into view
//
var y= $(this.hash).offset().top-$('#slide').offset().top;
$('#slide').animate({top: -y+'px'}, {duration: 450, queue: false});
return false;
});
Note this uses the href of the links to point to where they go, which will improve accessibility on non-visual browsers. You should also add some code to look at the location.hash on page load and if you see something there, scroll that page into view. Otherwise, it will be impossible to bookmark one of your subpages, or to middle-click-new-tab the links or anything like that.
I was doing something similar the other day, not 100% sure but this might help push you in the right direction..
onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"