Toggle Div combined with CSS-Hover - javascript

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>

I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.

Related

Customizing responsive navbar

it is my first time using flex and I tried to make a responsive navbar and it is success in a way. Things I want to do:
Make the hamburger icon turn to X with smooth transition.
Make the menu opening with smooth slide down transition (instead of instant showing).
Add [ border-bottom: 1px solid black; ] to .social-icons when the menu is opened (active).
Add [ border-radius: 0; ] to .social-icons ul li:first-child when the menu is opened (active).
I've tried many things, watched many tutorials but I can't make it. Here is the code:
Help will be much appreciated.
You can not expect people to finish your code off, especially when it is something simple as HTML & CSS.
First of all I am going to explain it how you can accomplish 3rd and 4th problem that you have.
When you click hamburger icon to show menu, it adds 'active' class name to 'navbar-links'.
Therefore you need to make something like this to accomplish what you want.
.navbar-links.active .social-icons{
...your style goes here..
}
How this works is that you are selecting elements that have both navbar-links and active as their class names. After that selector you are selecting child elements that have social-icons class name.
To make smooth animations when you open menu and when it resizes, I recommend you looking into w3schools tutorial where you can see how animations work.
Just add animation to hamburgers class name and as soon as it gets that class name it will make an animation that you designed.
Look at it this way, when you declare animation for a class, as soon as an element gets that class it will run an animation.
For instance you can do something like this :
CSS :
.toggle-button{
opacity: 0.5;
color : white;
}
.active_toggle_button{
animation : customAnimation 0.5s linear forwards;
}
#keyframes customAnimation {
to{
opacity: 1;
color : green;
}
}
And in your Javascript :
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
toggleButton.classList.toggle('active_toggle_button');
})
This will toggle "active_toggle_button" class to your hamburger when you click it. As soon as it adds this class to your hamburger it will do the animation.
As I said, look into the link I gave you from w3schools. This is just general idea to let you know how it actually works.

Jquery this parameter for selecting child not working

I've been trying to change image source on hover, however i can use mousehover function with class name and do this. The challenge here is i'm going to dynamically call more divs with same class name so i'm trying to achieve this using the this method. for some unknown reason i couldn't execute my below code. can anyone suggest what seems to be the problem? Pasting my code below
$(".img_staff").mouseover(function() {
alert(2);
$(this).find('.staffimg:first-child').css("display","none");
$(this).find('.staffimg:nth-child(2)').css("display","block");
alert(3);
});
Both the alerts are working fine just the inbetween 2 lines are not working. i want to achieve this effect like moca tucson site's contact page
https://moca-tucson.org/contact/
I'm trying to recreate the same effect using Jquery
Apart from changing the image, the link that your provided also uses CSS transitions to bring that "image transition" effect.
Here's the similar effect with just CSS, without any javascript.
HTML:
<div>
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>
CSS:
div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
position: absolute;
transition: 0.3s;
}

Jquery CSS mouse hover animation not working smoothly

I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.
Any suggestions?? this is my JsFiddle code.
When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.
As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.
Also, to avoid the #disclaimer to move around, make it position:absolute;.
Here is the JS Fiddle
CSS
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText { opacity:0; }
.hovered #disclaimer { opacity:0; }
#disclaimer {
/* ... */
position:absolute;
top: 168px;
left: 235px;
}
I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.
You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.
The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!
You can fix this, by changing disclaimer hover part with this:
$('#disclaimer').mouseenter(
function (e) {
$('#wrapper').addClass('hovered')
.mouseleave(function () {
$('#wrapper').removeClass('hovered');
})
});
So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.
Here is the result http://jsfiddle.net/r3BTU/2/
You can set up to classes (a hidden and a visible) and the switch between the classes with js.
var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){
movingElement.className="class2";
};
disclaimer.onmouseout= function(){
movingElement.className="class1";
};
You can add trasitions in the css so the visible class "fades" in.
Here's a Demo:
http://jsfiddle.net/Nillervision/eSbzg/

Text appear in zoom in effect

How can we show text in zoom in effect. I saw it on one travel site. I did google but cant find this kind of effect. I just want little hint what kind of effect is this. I red about easing but did not find the same effect. I have attached screenshot for the same. Here is link of that website http://cleartrip.com/flights?ui=v3. The effect is on payment page
Ok, so when you do something to make the section appear, the button within it animates from nothing to 100% size from its center point. So basically what you are asking is how to make something grow from 0% to 100% via animation. There's probably a totally javascript way but I personally would use css animation for this.
Suppose you are adding a class to the parent div to reveal a section of content (in the example you linked to it is revealing a section of the order form) all you need to do is in the css add an animation to the button that is triggered when the section gets a class added. In my example below I'm calling the section 'page' and assuming you're adding a class of 'active' to reveal it - obviously these could be anything you like:
Html:
<div class="page">
<div class="animated_button">Look at me</div>
[other content that you don't want to animate]
</div>
Css:
.page{
display:none;
}
.active{
display:block;
}
.animated_button{
[styling for how you want your button to look]
}
.active .animated_button{
animation: growUp 0.4s;
}
#keyframes growUp {
0% { transform:scale(0); }
100% { transform:scale(1); }
}
Note that you may need to add vendor-prefixes for the transforms.
Here is a codePen - there's a few extra styles and stuff in there just to show an example of how it works:
http://codepen.io/chrisboon27/pen/weJmL

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

Categories