I was working on a project that had a different header appear for when the page is scrolled past the main one.
Here's a fiddle with my code:
https://jsfiddle.net/a7tLdsov/3/
Could anyone explain how to make this work? I thought that this js would make it work but it still isn't quite there.
Thanks,
:)
Try making these changes:
Change
$("body").scroll
to
$(window).scroll
and change
document.getElementById('transhead').style.display = "visible";
to
document.getElementById('transhead').style.display = "block";
Make sure jQuery is added as a framework in your fiddle.
Updated fiddle: https://jsfiddle.net/hba9twcd/
Related
My attempt: https://codepen.io/alexyap/pen/gRLeVY?editors=1010
$(document).ready(function(){
$(document).scroll(function(e){
e.preventDefault();
$("#mainContainer").css("transform", "translateX(-100vw)");
})
})
This is driving me nuts. I'm trying to make my site scroll a full page horizontally. I figured the first part out but alas it stops working after the second scroll.
PS: from my pen you can see I have the body set to overflow hidden but have it commented out (my code only works if I don't have it set so).
Someone please help me figure this out.
In your CodePen, I only added e between the parenthesis in
$(document).on('mousewheel', function(e){
That is the event object passed to your function.
It is needed to compare the wheel delta.
You had it in the $(document).ready(function(e){ where it was useless.
So here is your CodePen updated just like this.
Just for fun... I customized it a little more by foreseeing what someone would like to change using this "div translation" effect.
The first thing is certainly the div amount.
And the translation "fraction" would be another thing...
And a minimum delay between each translation.
So here is a CodePen taking this in account.
I'm trying to create a banner ad. There's a collapsed version that has an expand button and then the expanded, bigger version has a collapse button to go back to it's previous state. I've been asked to do this without using external javascript libraries and only using JS and CSS. I'm trying to do it with JS and CSS animations right now, but I'm having a hard time. Can anyone tell me what I'm doing wrong and help me get on the path to fixing my problem?
Here's a link to the code I have going now.
function fade(btnElement) {
if (btnElement.id == "expandButton"){
console.log("expand!");
document.getElementById("myImg").className = "fade-out";
document.getElementById("myImg").display = "none";
document.getElementById("myImg2").display = "block";
document.getElementById("myImg2").className = "fade-in";
console.log(document.getElementById("myImg2").display);
}
else {
document.getElementById("myImg2").className = "fade-in";
btnElement.value = "Fade Out";
}
}
I can get the first image to fade out, but I can't seem to get the second image to fade in...
EDIT: so, I have the images switching back and forth, but that was never really a problem for me... The problem I'm having is making them fade into each other via button click using CSS transitions. Can anyone help?
The reason the second image stays hidden is because document.getElementById("myImg2").display does nothing and the css rule you have written for #myImg2 remains. try instead document.getElementById("myImg2").style.display And you will the the element display block. Not sure about the fade though. That didn't seem to work appropriately.
Take a look at https://www.simple.com website. See the way menu (& submenu) works when you scroll the webpage.
Does anyone know what it's called or know how it works? I'm trying to find a example or plug that can do this.
Thanks...
It is called fixed navigation bar and here is a great tutorial
http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/
It is very simple using jquery scroll() event handler.
You can bind it using following code
$(window).scroll(function () {
//your code goes here
}
read more at http://api.jquery.com/scroll/
It's just a simple anchor tag they've used along with some jQuery. A quick example here for you.
Create your links as normal Blog. This creates an anchor to move to your blog section.
Add a class to your element so it's now like: Blog
Next, add the jQuery code below to your page.
Don't forget to include the jQuery library..
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I have decided to delete the question as there's no answer to what I'm looking for and there's no need to leave behind an unanswered post 2 years from now.
so here is the script:
<script>
var div = $("#gridline1");
$(document.body).mousemove(function(e){
if(e.pageX<630){div.animate({right:'+=1'},1);}
else {div.animate({left:'+=2'},1);}
});
</script>
Its working, but when it gets after the "else" its stop doing the "if" statement.
Please help.
http://jsfiddle.net/nxaFG/
I'm not sure what HTML or CSS you are using, and the effect may depend on those as well. However, I think you can just replace right:'+=1' with left:'-=1'. Here is a working example: http://jsfiddle.net/katylava/kagnr/
Can anybody tell me how to make a sidebar. There is nothing about sidebar in the XUL reference. I referred some old codes. But, I can't get where to edit. In those codes I have to create jar files frequently which annoys a lot. Can anybody show me a guidance, just a simple code to add a listbox in sidebar?
Edit:
This code works. I edited the code in "emptysidebar.xul". But it didn't work.
Any solution to add elements in sidebar is welcomed.
I didnt even dreamt that the solution will be this much simple. This is the solution.
var sidebarWindow = document.getElementById("sidebar").contentWindow;
if(sidebarWindow)
{
sidebarWindow.location = "chrome://custombutton/content/login.xul";
// your xul location
}
else
{
alert("sidebar window is not null");
}