I need to frequently (e.g. every minute) update this news website and afterwards scroll down to "Zeit" (="time") each time...
...which equals class="Zeit ft-vsbl ft-first-column" in HTML-code. For the updating-part I found this handy Firefox add-on, which luckily also allows to run some Javascript/jQuery code snippet after each reload and I used this possibility for the second part of scrolling down by passing this code to the add-on:
var $container = $("html,body"); var $scrollTo = $('.Zeit ft-vsbl ft-first-column');
$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
This worked for some time like a charm. Unfortunately, however, something — probably in the structure of the website — recently changed and this code no longer scrolls down to the desired position (it just scrolls down too little) and I lack the Javascript/jQuery knowledge to adapt the code accordingly.
Can somebody please help me and get 10 points? 😊
I am not familiar with that Firefox addon, but it works properly in console.
I would recommend just to delete this part
- $container.offset().top + $container.scrollTop()
Like this:
var $container = $("html,body"); var $scrollTo = $('.Zeit');
$container.animate({scrollTop: $scrollTo.offset().top, scrollLeft: 0},300);
This will always scroll to your element $('.Zeit'), even if you are in the bottom of the page. And the old code supposed that you are always at the top of the page. Maybe it will help you.
Your code must have stopped working because the website structure has changed like you said. With the current version of the website var $scrollTo = $('.Zeit ft-vsbl ft-first-column') cannot identify the part to scroll into (it returns nothing).
Let's make it simple. id is usually better to identify an element because id is meant to be unique. id is prefixed with # in a query selector.
document
.querySelector('#WNachrichten_Marktberichte_Home_Index')
.scrollIntoView({
behavior: 'smooth',
});
Website structure may change anytime. I recommend learning the technique for yourself. Here're the references.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Related
I've seen this type of question in Stack Overflow before and none of them help really. I've also Googled it but no dice.
I'm wondering if it's possible to hide the ID from the URL if the user clicks on the tabs itself?
This is the webpage:
www.planet.nu/dev/new-experian/index.html
Then when I clicked on a tab, this is what will happen:
www.planet.nu/dev/new-experian/index.html#dataTab1
I heard that using Javascript can actually hide that but I'm not sure how. My clients are really keen to hide such ID from appearing on the URL even though it does no harm.
This is where I got the plugin:
http://webthemez.com/demo/easy-responsive-tabs/Index.html
If there are no other solutions, then I might have to change the jQuery code for this. :(
What I've done is in 'easyResponsiveTabs.js' search for
var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
replace the line with
var newHash = "";
and then seach for
newHash = '#'+newHash;
replace the line with
newHash = ''+newHash;
Enjoy!
try jquery $("body").scrollTop() function. it will not show the id in the url bar and try not to use many plugins.
$('html, body').animate({scrollTop:$('#dividhere').position().top}, 'fast');
You could use:
window.history.pushState('object or string', 'Title', '/index.html');
Or:
window.history.replaceState('object or string', 'Title', '/index.html');
I often use it - you can find a more detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
What you are calling an "id" is a "hash", the hash is used to scroll to an anchor (by default) or can be used by JavaScript to signal things like tab switches, or internal page switches, or really anything you want. You don't always want to remove them (because it might break some JS functionality) but if you do want to you can use:
location.hash = "";
Don't use plugins you don't understand. This was made on purpose. Of course you can modify this plugin - set historyApi to false in line 24, but I advise to write some code from scratch and learn jQuery. Simple tabs are basics. Level 0... It's not hard.
I've found a few posts on here similar to what I'm asking, but they all involve jQuery (I'm looking for a solution that's purely javascript, as simple as possible).
I have a page with a fixed nav on the left, where the different links bring you up or down to different sections on the page. It works fine, but I was trying to find a way to animate the scroll. I managed to come up with some javascript that tells me the offset between the sections:
function scroll(e) {
dest = e.target.getAttribute('href');
(for example, this would give me the result of #aboutCon)
destination = dest.replace("#", "");
(this changed it to aboutCon which is already defined as a variable containing the "About" section)
var destOffset = window[destination].offsetTop;
window.scrollTo(0, destOffset);
}
but I have no idea how to take that information and animate it. I've found a few javascript solutions but they're so complicated, whenever I try applying them to my own code, they don't work. I'm hoping there's a simple way to achieve this?
I'm a student and still learning so if you have an answer, an accompanying explanation would be greatly appreciated! Thank you!
document.getElementById("elementID").scrollIntoView();
Or cleaning it up a bit...
function scrollIntoView(eleID) {
var e = document.getElementById(eleID);
if (!!e && e.scrollIntoView) {
e.scrollIntoView();
}
}
Of course replace "elementID" with the ID of the div or element you want to scroll to.
This one is the simplest solution I've found with pure JS.
I have googled around and found a few solutions to this problem, but none of them seem to work in my situation. I have tried hidden inputs to scroll to, that stay at the bottom
document.getElementById('scrollToMe').scrollIntoView();
I have tried
$("#postbox").scrollTop($("#postbox")[0].scrollHeight);
and a few others. Here is my situation
I have a chat room (http://novaplasm.topiacloud.com/Chat). When you type anything, it enters it into the div "postbox" using Knockout. Every time you enter new content, it appends it. I want to make it so you can always see the latest message, without having to scroll yourself. I can't seem to do this for the life of me. Thanks in advanced!
First get a reference to your postbox and chat message div
var pbox = $('#postbox');
var chat_div = $('<div></div>').attr('class', 'chat_msg').text(msg);
Here msg is your chat message
Then you have to scroll down using the 'animate' method like this
chat_div.appendTo(pbox);
var height = pbox.scrollTop() + pbox.height() + $('#postbox').filter('.chat_msg:last').scrollTop();
pbox.animate({'scrollTop' : height}, 1000);
Here the animation is happening over 1 sec.
Refer jQuery documentation for more detailed explanations on jQuery methods.
Live fiddle example
I'm modifying some code from a question asked a few months ago, and I keep getting stymied. The bottom line is, I hover over Anchors, which is meant to fade in corresponding divs and also apply a "highlight" class to the Anchor. I can use base JQuery and get "OK" results, but mouse events are making the user experience less than smooth.
I load JQuery 1.3 via Google APIs.
And it seems to work. I can use the built in hover() or mouseover(), and fadeIn() is intact... no JavaScript errors, etc. So, JQuery itself is clearly "loaded". But I was facing a problem that it seemed everyone was recommending hoverIntent to solve.
After loading JQuery, I load the hoverIntent JavaScript. I've triple-checked the path, and even dummy-proofed the path. I just don't see any reasonable way it can be a question of path.
Once the external javascripts are (allegedly) loaded in, I continue with my page's script:
var $old=null;
$(function () {
$("#rollover a").hoverIntent(doSwitch,doNothing)
});
function doNothing() {};
function doSwitch() {
var $this = $(this);
var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
$this.addClass("highlight"); //adds the class "highlight" to the current switch div
$("#panels div").hide(); //hide the divs inside panels
$("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
$old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
};
I get the error:
Error: $("#rollover a").hoverIntent is not a function
If I change to a known-working function like hover (just change ".hoverIntent" to ".hover") it "works" again. I'm sure this is a basic question but I'm a total hack when it comes to this (as you can see by my code).
Now, for all appearances, it SEEMS like either the path is wrong (I've zillion-checked and even put it on an external site with an HTTP link that I double-checked; it's not wrong), or the .js doesn't declare the function. If it's the latter, I must be missing a few lines of code to make the function available, but I couldn't find anything on the author's site. In his source code he uses a $(document).ready, which I also tried to emulate, but maybe I did that wrong, too.
Again, the weird bit is that .hover works fine, .hoverIntent doesn't. I can't figure out why it's not considered a function.
Trying to avoid missing anything... let's see... there are no other JavaScripts being called. This post contains all the Javascript the page uses... I tried doing it as per the author's var config example (hoverIntent is still not a function).
I get the itching feeling I'm just missing one line to declare the function, but I can't for the life of me figure out what it is, or why it's not already declared in the external .js file. Thanks for any insight!
Greg
Update:
The weirdest thing, since I'm on it... and actually, if this gets solved, I might not need hoverIntent solved:
I add an alert to the "doNothing" function and revert back to plain old .hover, just to see what's going on. For 2 of my 5 Anchors, as soon as I hover, doNothing() gets called and I see the alert. For the other 3, doNothing() correctly does NOT get called until mouseout. As you can see, the same function should apply for any Anchor inside of "rollover" div. I don't know why it's being particular.
But:
If I change fadeIn to another effect like slideDown, doNothing() correctly does NOT get called until mouseout.
when using fadeIn, doNothing() doesn't get called in Opera, but seems to get called in pretty much all other browsers.
Is it possible that fadeIn itself is buggy, or is it just that I need to pass it an appropriate callback? I don't know what that callback would be, if so.
Cheers for your long attention spans...
Greg
Hope I didn't waste too many people's time...
As it turns out, the second problem was 2 feet from the screen, too. I suspected it would have to do with the HTML/CSS because it was odd that only 2 out of 5 elements exhibited strange behaviour.
So, checked my code, dug out our friend FireBug, and discovered that I was hovering over another div that overlapped my rollover div. Reason being? In the CSS I had called it .panels instead of .panel, and the classname is .panel. So, it used defaults for the div... ie. 100% width...
Question is answered... "Be more careful"
Matt and Mak forced me to umpteen-check my code and sure enough I reloaded JQuery after loading another plugin and inserting my own code. Since hoverIntent modifies JQuery's hover() in order to work, re-loading JQuery mucked it up.
That solved, logic dictated I re-examine my HTML/CSS in order to investigate my fadeIn() weirdness... and sure enough, I had a typo in a class which caused some havoc.
Dumb dumb dumb... But now I can sleep.
I am interested in the floating effect of SO when pressing the newest link:
Which library would you use in jQuery to make the floating effect?
If you look at that page and view the source you can see exactly what they're doing. It's really only about 10 lines of javascript that scrolls to the section you want to sort when a link is clicked:
$.scrollTo("#answers-table", 400);
Then it calls the API using jQuery with the href supplied on the sort link:
var url = $(this).attr('href');
$.post(url, function(result) {/*function code is below*/})
Then the function that is specified for the callback replaces out the entire div you just scrolled to with the result:
var domelement = $(result);
$("#answers-table").html(domelement);
The actual tab styling is just specifying a different class for the link to change the color. This is also not exactly the order in which things are done but it's pretty close.
Someone please let me know if discussing the way StackOverflow's site works is against any sort of TOS.
This looks like tabs but with some CSS to make it look different.
http://jqueryui.com/demos/tabs/