I've got a scroll path event occurring when I reach this point in the site's destination. As you can see from the following code, when a user travels to this specific point, "my work," the div "#mywork" fades in, (as it's css is originally set to display:hidden.)
path.lineTo( 3220, 4600,{
callback: function() {
$("#mywork").fadeIn(2000, "linear");}, name: "mywork"});
I would like the "#mywork" div to fade out whenever the user leaves this point (i.e. scrolls away from it, and/or clicks on a different navigation link.) If the user returns, I would like for the div to fade back into view as it normally would.
Any suggestions? Thanks so much in advance if you can find the time to help me.
I think this library can help you out. You'd use it in place of path.lineTo.
https://github.com/sakabako/scrollMonitor
Related
I have started to learn JavaScript and was going through the tutorial on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash with the guess game and want to incorporate the guess game into a web page to see how I can ran the game in a div container. All works fine up to when the game is over or the game is won and the 'Start new game' button comes up and the document.body.appendchild(resetButton); is executed.
The button is placed at the end of my page after the Footer and not inside the div container. What am I doing wrong and what can I look at to change the code to let it come up at the bottom of the container under the 'Enter the guess' bar as in the example?
In the example everything is under the body tags, but I have created a under the page to run the game in.
I have also tried to run document.body.append(resetButton); and even changed the .body to document.div.appendchild(resetButton); code to see if I can place it at the correct spot. When I change the .body code it gives me an undefined error on append.
I think you can use insertAdjacentElement method, it allows you define the inserting position.
It accepts these values:
'beforebegin': Before the targetElement itself.
'afterbegin': Just inside the targetElement, before its first child.
'beforeend': Just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
Example:
document.body.insertAdjacentElement('afterbegin', element);
I have a sidebar router-view element in my app.vue that is optional next to my "regular" router-view element. Now this sidebar has a transition effect when it opens and now I'm also trying to add sliding transitions when navigating within this sidebar. The idea is that this should work like in the iOS Agenda app:
I'm adding a transitionName depending on $route.to and $route.from but I'm not seeing how I'm getting the effect I want the way my template is structured now.
I've set up a sandbox here: https://codesandbox.io/s/vuepoc-etqvg
Click "Go to Day x"
Click on "Details" and de sidebar opens (works!)
Click on "Expenses" in de sidebar (Looks like it only needs overflow: hidden but didn't work for me)
Click on "Back" (This doesn't work at all..)
Is there someone that can give me a kick in the right direction? Am I on the right track? Should I structure my html/css differently? Or maybe even change the way I structure my routes and put the sidebar somewhere else?
I must have tried a hundred time by now to select an html element and then create a snippet with Chrome SnappySnippet, but each time I get the error
Error! DOM snapshot could not be created. Make sure that you have inspected some element.
In this video it looks easy, but out of those 100 times, I have been able to make it work once with something random.
Question
Is the selection somehow time based, so I have to click on SnappySnippet in e.h. less than a second?
How do you keep the selected element, so when moving the mouse to the SnappySnippet button other elements are not selected from hovering them?
Use the tree-DOM menu, left click on a div so it becomes dark blue. Now it is selected even thought hovering the mouse over other div's it will remain selected.
The problem you have is probably because SnappySnippet can't handle large div's. Try with a very small one first.
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
I have the following HTML code:
<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
More Info
</div>
If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.
If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).
Is there any way around this 2x opening window scenario?
The simple solution:
More Info
You could make the div clickable by making the link into a block element with css
div a {
display: block;
}
That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.
You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.
More info about event bubbling here: http://www.quirksmode.org/js/events_order.html
You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.
Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.
I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:
<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});
where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.