airbnb.com Header with same animation - javascript

i just try to copy that header animation but i cant
i know they use React and i am trying do that with just html,css,js
is that even posable !
i tride many thing lik hover and focus but still not working as it should be
maybe they use js libraries to do that , idk please advice if u can
Thanks
function myFunction() {
var element = document.getElementById("search-bar");
element.classList.add("my-search-style");
}
$(document).ready(function() {
var x = document.getElementById('site-content');
//click can also be antother event
x.addEventListener('click', function(x) {
if (document.getElementById('search-bar').classList.contains("my-search-style")) {
document.getElementById('search-bar').classList.remove("my-search-style");
}
if (document.getElementById('sticky-top').classList.contains("top-search-style")) {
document.getElementById('sticky-top').classList.remove("top-search-style");
}
});
});
let headerForm = document.getElementById("search-header-form");
let headerFormBtn1 = document.getElementById("navbarDarkDropdownMenuLinkwhat");
let headerFormBtn2 = document.getElementById("navbarDarkDropdownMenuLinkwhen");
let headerFormBtn3 = document.getElementById("header-form-search-btn");

Related

Beginner question: Two Scripts cancelling each other out?? query selector / function / addEventListener

i'm a beginner in terms of Javascript.
For my project I tried/recreated some tutorials and pasted them in the script Tag in the html file. Now I noticed that 2 of them are not working. It seems like they cancelling each other out: When I delete one script, the other is working and the other way around.
The problem must be pretty basic, but as a beginner I'm not sure what I'm overlooking.
These are the two scripts. The first one is for a toggle button and the second one for the mobile hamburger menu.
var switchButton = document.querySelector('.switch-button');
var switchBtnRight = document.querySelector('.switch-button-case.right');
var switchBtnLeft = document.querySelector('.switch-button-case.left');
var activeSwitch = document.querySelector('.active');
function switchLeft(){
switchBtnRight.classList.remove('active-case');
switchBtnLeft.classList.add('active-case');
activeSwitch.style.left = '0%';
}
function switchRight(){
switchBtnRight.classList.add('active-case');
switchBtnLeft.classList.remove('active-case');
activeSwitch.style.left = '50%';
}
switchBtnLeft.addEventListener('click', function(){
switchLeft();
}, false);
switchBtnRight.addEventListener('click', function(){
switchRight();
}, false);
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade')
});
//burger animation
hamburger.classList.toggle('toggle');
}```
I can only see that you are missing ); at the end of your code, the closing part of hamburger.addEventListener(.
Also i guess these ``` at the end are typos while trying to format your code in the editor here.
Make sure there is no error printed in your browser console.

Swap images with onclick

I have an incomplete script here that just needs to give a few adjustments of positions and add the exchange of images with the function Onclick of JavaScript but do not remember how to do more this exchange I would like to know what the error of the following code and how to fix, since I thank you.
// Like Normal e like Marcado
var imgLike01 = "images/mylike.png"
var imgLike02 = "images/like.png"
// Deslike Normal e deslike desmarcado
var imgDeslike01 = "images/mydeslike.png"
var imgDeslike02 = "images/deslike.png"
var likebtn = document.getElementById("likebtn");
var deslikebtn = document.getElementById("deslikebtn");
function like () {
likbtn.img.src = imgLike02;
}
function deslike () {
deslikebtn.img.src = imgDeslike02;
}
function Trade(){
if ($like).click(function() {
likbtn.img.src = imgLike01;
});
if ($deslike).click(function() {
deslikebtn.img.src = imgDeslike01;
});
}
Note This is the exchange of images from an old like system in JavaScript, a sum script and only missing image switching.
Add an eventListener to likebtn:
likebtn.addEventListener("click", like);
Do the same for deslikebtn.

Seemingly correct way to trigger Javascript function via link, not working

Alright, so I've been reading and reading and ready about how to run some simple Javascript code when a link has been clicked, but no matter what I try, I can't seem to get it to work!
The idea is that when my link is clicked, it will change color and fill a variable, then when it is clicked again it is to change to another color and return the var back to the state it was (effectively resetting the first click)
Can anyone tell me where I am going wrong here?
Here is my Javascript code:
window.onload = function() {
document.getElementById("atonal").onclick = function() {
var categoryLink=new Array();
var counter;
categoryLink[0] = "empty";
categoryLink[1] = "empty";
categoryLink[3] = "empty";
counter = "0";
if (categoryLink[0]=="empty") {
categoryLink[0] = "atonal";
counter = counter + 1;
stylesheet.insertRule("#atonal {color: #FFFFFF}", 0);
}
if (categoryLink[0]=="atonal") {
categoryLink[0] = "empty";
counter = counter - 1;
stylesheet.insertRule("#atonal {color: #474747}", 0);
}
return false;
}
}
And my HTML:
antonal sound
There are two identical syntax errors in this code; FireBug or equivalent would have showed these to you:
if (categoryLink[0}=="empty") {
That } ought to be a ], of course. Fix those, and your code will work -- or at least, your onclick will be registered and invoked when you expect.
The comments about window.location = "http://www.google.com/"; are correct.
But also, you have a syntax error in your last 2 IF statements:
if (categoryLink[0}=="empty") {
Should be:
if (categoryLink[0]=="empty") {
http://jsfiddle.net/Ekxbu/

New to JavaScript and need help on my first program

I'm trying to add a function to my website so when the user clicks on a footnote the browser will display it inline. Here is how far I have gotten,
var locate= document.getElementById("footnote1");
var note= document.getElementById("footnotes2");
function footnote() {
locate.onclick= note.style.display="inline";
};
any help would really be appreciated.
Here is an example of what you want.
var locate = document.getElementById("footnote1");
var note = document.getElementById("footnotes2");
locate.onclick = function() {
note.style.display = "inline";
};
Working Example
http://jsfiddle.net/v8fHE/
you just had to wrap the onclick action in a function
trigger.onclick=function(){toChange.style.background="#FF0000"};

Trying to add a mouseover effect to this Javascript code

Hello am trying to add a mouse over effect to this code but ive been unsuccessful in doing so, Any help would be great... Am not sure if you will need anymore info but if so I can add anything you need
The problem I have is that when I over over the Tab's I can click the text and it highlights it all :( am after the normal mouse over effect if that can be done
Thanks
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
To add a mouseover effect in jquery, try it like this:
$('#your id / .your class').bind('mouseover', function() {
alert('hello world');//YOUR CODE HERE
});
I don't see any mouseover events in your code, check the API here:

Categories