Guided Scrolling on web page [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How does this page accomplish the (guided scrolling?) technique between two divs, where with just a small flick on the scroll pad it takes you to the next element?
http://sourcing.alibaba.com/buyermarket/buyer_market_home.htm?tracelog=alihomelink

If you want a library, I'd suggest fullPage.js. I used it in a recent project and it does the trick without even bother.

There are a number of methods to achieve this. One of them is jQuery Mousewheel.
Here is a simple example of how it works:
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// using the event helper
$('#my_elem').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
See a working example here: http://jsfiddle.net/DgmWs/5/

Didn't check what library they are using as they are more than likely using a function in jquery or dojo to do this for them but in terms on pure js and dom intereaction. They are doing something like this
window.onscroll = function (oEvent) {
// called when the window is scrolled.
var el = document.getElementById('#someid');//could be selecting the element by class or other means
el.scrollIntoView(true);
}
See the docs for more details:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

Related

How do I make my code rerun/change when a certain element's value changes in Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
In my case I run the code
var a = document.getElementById("txtTehtav").textContent.match(/\d+/g)
let [x, y] = a
var answer = x*y
alert(answer)
The element which I would like to watch is txtTehtav.
The code for the element is <a class="thrida" id="txtTehtav" name="txtTehtav">3x4=</a>
So whenever the textContent of txtTehtav changes (in this case 3x4) I want my code to rerun/update so x and y would change, where as 3 would be x and 4 would be y.
(for example my code would give the answer for 3x4 and when it will change to something like 2x4 my code would detect it and rerun it/update the answer)
How do I make my code rerun when that happens?
Any help would be greatly appreciated!
Depends on your setup:
If you know which code changes the text content of your DOM element, you can adjust it to call your function or listen to any events that code might trigger.
If you don't, you can use MutationObserver to listen for DOM changes. Read more about them on MDN

How do I target $0 without getElementById [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');

Javascript delay/resizing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi i want to shrink and image and then resize it while keeping it in the same place(centerd in the page) i would like to do this using javascript. I want this to happen on a onclick event. If you need to see my code its here http://cannonmc.net/ .
For more of an idea of what i want/need look at http://orteil.dashnet.org/cookieclicker/ i want to do the same to my image as what happens when you hover/click on that cookie :).
Thanks
Luke.
I made a very simple example for you, I hope this helps.
var image = document.getElementById('image');
image.onmousedown = function() {
image.style.width = "47%";
};
image.onmouseup = function() {
image.style.width = "";
}
Would be all JavaScript needed, with the additional CSS.
Working example here:
http://jsfiddle.net/zy96xqc7/2/

How to remove spaces between words in a link? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Shortened up:
I need
View in iTunes
to appear as
View in iTunes
Detailed:
So basically what I'm doing is I'm trying to link to the itunes store I'll use this link as an example itunes.com/OfMonstersandMen/MyHeadIsAnAnimal.
This links directly to the item on the iTunes store. I'm using blogger and I'm going to automatically fill the links. The only problem with that is the links will appear as itunes.com/Of Monsters and Men/My Head Is An Animal. So what I need to do is use javascript or jquery to remove the spaces between the words in the link.
I've been looking all over for a solution. Is there anything I can do to fix this??
jsBin demo
$('.view-itunes a[href*=" "]').prop('href', function(i, v){
return v.replace(/%20/g,"");
});
Cause the browsers translates blanks inside href with %20
View in iTunes
<a id="result">View in iTunes</a>
<!--this is a example to result:-->
<b></b><br>
jquery
var aq = $('a').attr('href').split('%20').join('');
$('#result').attr('href',aq);
//this is a example to result:
$('b').text(aq);
Just use string replace function
var a="test%20string";
var b=a.replace(/%20/g, "");

Showing div's by URL [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I know this is probably a stupid question but unfortunately our programmer at work is sick today, of course my deadline is today... I seriously have no clue.
I have 2 divs: .translate_EN and .translate_NL
Well the problem is I need to show .translate_EN when my URL contains /en/ and show .translate_NL when my URL contains /nl/. It can also be selected by: www.domain.com/en/ and www.domain.com/nl/
You will help me ALOT if you can provide me this script!
Many thanks in advance!
This code will return '/en/' if url contains '/en/' or null if it doesn't.
window.location.href.match('/en/')
So you can write if block and make your div's property display block or none.
E.g.:
Make your divs style: display: none then on the page write that code inside <script> tag:
var isEn = window.location.href.match('/en/');
var makeVisible = function(className) {
document.getElementsByClassName(className).item().style.display = 'block';
}
if (isEn)
makeVisible('translate_EN');
else
makeVisible('translate_NL');
I don't know all your requirements but that code will help you to understand what you need to do.
If you have a jQuery on your page, then it can be done with that code:
$('.translate_' + window.location.href.match(/\/[a-z]{2}\//g).pop().replace(/\//g, '').toUpperCase()).show()

Categories