My nav bar I designed in JsFiddle is acting weird. sometimes the hamburger menu does not work at all and other times it opens and closes the menu 5+ times. Any help is greatly appreciated.
It works fine when I get rid of the window width function, but I don't want it to behave the same when it is above 768 pixels since the hamburger menu is no longer needed at large screen sizes.
I believe it has something to do with this:
$(function(){
var w = $(window).width();
$(window).resize(function() {
if(w <= 768){
$('.mobile-toggle').click(function(){
$('nav').slideToggle(500);
this.classList.toggle('change');
});
$('.m-link').click(function(){
$('.m-link').removeClass('active');
$(this).addClass('active');
$('nav').slideToggle(500);
$('.mobile-toggle').removeClass('change')
});
}else{
$('nav').show();
}
});
});
https://jsfiddle.net/ChrisFred96/zg4nprfm/56/
Seems like it’s to do with the resolution and how it changes. My understanding is that it’s not fixed if you change the resolution.
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-8px, 6px);
transform: rotate(-45deg) translate(-8px, 6px);
background-color: red;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-7.5px, -7px);
transform: rotate(45deg) translate(-7.5px, -7px);
background-color: red;
}
Related
My CSS is as follows for the sake of example
.menu1 { width: 50px; height:10px; background-color: black; }
.menu_change .menu1 {
background-color: darkseagreen;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
My react code uses an onClick event to change the state of a specific property. when the property is set to true. It will add/remove the class menu_change to the menu1 element respectively. This happens as expected, no problems there. The problem I am seeing is that if my elements have more than one class assigned to them, the effect is lost.
If I render the element with one or the other of the classes I will get my desired effect. Which makes no sense. So I am trying to figure out what the actual issue is here
<div class="menu1"> WORKS </div>
<div class="menu_change"> WORKS </div>
<div class="menu_change menu1"> DOES NOT WORK </div>
You can try removing the space between menu_change and .menu1 like that
.menu_change.menu1 {
background-color: darkseagreen;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);}
Those (with and without space) are two different selectors.
So I'm super new to JavaScript and web development in general but I'm trying to find a way to toggle an element by clicking on another element.
To clarify, this is for the mobile version of my site. This is what it looks like now:
https://i.stack.imgur.com/F3lVo.png
What I'm trying to do is have the little hamburger menu in the bottom left corner be clicked to reveal my navigation bar which would slide in from the right.
If it makes the solution any different I am also using media queries to hide the navigation bar once the webpage becomes a certain width.
Here's what the JavaScript looks like for the hamburger menu so far:
<script>
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
hamburger.toggleClass('active');
return false;
});
});
</script>
And here's the CSS it activates:
#hamburger-icon.active .line-1 {
transform: translateY(10px) translateX(0) rotate(45deg);
-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
-moz-transform: translateY(10px) translateX(0) rotate(45deg);
}
#hamburger-icon.active .line-2 {
opacity: 0;
}
#hamburger-icon.active .line-3 {
transform: translateY(-11px) translateX(0) rotate(-45deg);
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
}
This animates the hamburger menu to become and X when clicked, but is there any way I can also have it trigger my navigation bar to become visible? Any help would be appreciated, thanks!
Yes, of course it can. Here's how you'd do it:
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
var navbar = $"#navbar"); //You'll have to edit this line, I'm just guessing
hamburger.click(function() {
hamburger.toggleClass('active');
navbar.toggle();
});
});
Note that you'll have to change the var navbar = $("#navbar"); as I don't know what your navbar is.
Maybe you could try like this:
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.on('click', function(){
hamburger.toggleClass('active');
});
});
Following is the code
<html>
<head>
<title>Facing issue while applying css tranform properties to DOM object using multiple css classes</title>
<!-- PUT A PATH OF JQUERY LIBRARY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.onload = function () {
var flag = true;
setInterval(function () {
if (flag) {
flag = false;
$("#spelling_game_score_box_score").addClass("active_score");
}
else {
flag = true;
$("#spelling_game_score_box_score").removeClass("active_score");
}
},2000);
}
</script>
<style>
#spelling_game_score_box_score {
position:absolute;
top:200px;
left:200px;
height: 100px;
width: 100px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
font-size: 36px;
background-color: orange;
}
.active_score {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
}
</style>
</head>
<body>
<div id="spelling_game_score_box_score">100</div>
</body>
</html>
Now, I run the code I can not find scale() effect after interval of 2000 ms. But when I comment following css under #spelling_game_score_box_score selector
/*transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);*/
I can have scale effect but can not find rotate effect.
I want to know that is there some sub properties for css tranform like border has border-color, border-style etc. so I can have some solution regarding the problem.
Please help me if you have some idea about it.
Thank you.
There are two problems here:
CSS Specificity
transform css code
First, you use id to specify the transform functions:
#spelling_game_score_box_score {
...
transform: rotate(-30deg);
...
}
Then, you try to override it by specifying a class:
.active_score {
transform: scale(2);
}
which wouldn't work because of the CSS specificity problem.
You can solve this by making it more specific:
#spelling_game_score_box_score.active_score {
transform: scale(2);
}
But then we come to the second problem where transform: scale(2); overrides the original transformation.
To solve this you can use both rotate and scale in the same transformation.
#spelling_game_score_box_score.active_score {
transform: rotate(-30deg) scale(2);
}
Here is a working fiddle: https://jsfiddle.net/uopfapd3/
I have a slider that I've been trying to get working. It's demo was 3 slides, but I am trying to add 4. When I add it in, the 4 item is either
In the back permanently
Under the right-sides image
I'm not quite sure how I can fix this, if there is a way.
To help describe what I'm looking for, imagine the below is my diagram:
[back img]
[left img] [right img]
[front img]
I am trying to make it so it revolves. Currently, you can see the front/left/right images, which is what I need, but you can also see the back image.
I essentially need the back image to be hidden, so whichever image is in that spot, hide it.
Here is the set up in HTML
<div class='p_slider'>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
<div class='p_slider__item'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
</div>
</div>
The positioning in CSS
.p_slider__item:nth-of-type(1) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
-webkit-filter: blur(2px);
opacity: 0.8;
z-index: 1;
}
.p_slider__item:nth-of-type(2) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
.p_slider__item:nth-of-type(3) {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 1;
-webkit-filter: blur(2px);
opacity: 0.8;
}
.p_slider__item:nth-of-type(4) {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 2;
}
I have quite a bit more code invested in this, but to keep it short, I also have this JS Fiddle Link. I know this is pretty custom work so I appreciate all the help I get! Thanks!
What I've Tried
updated fiddle with 4 items all moving here: DEMO
So I now have 4 items in rotation, but the slider wants to do this.
Slide front image to right
Slide left image to center
Slide (new center) img to Left and swap with that left
Slide (new center) to right, Slide Left to center
You can simplify the code for rotating by defining classes like left,right,front and back for the positions respectively and add and remove them to elements based on rotateLeft() or rotateRight() functions.
CSS:
.back
{
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
left:0px;
z-index: 1;
-webkit-filter: blur(2px);
}
.front
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
left: 0px;
z-index: 3;
}
.left
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: -200px;
opacity: 0.8;
z-index: 2;
-webkit-filter: blur(2px);
}
.right
{
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
left: 200px;
z-index: 2;
-webkit-filter: blur(2px);
opacity: 0.8;
}
JS:
// 3D Slider for Reece
on = 0; // Init
time = 500; // Set the delay before the next click is accepted to 1 second
// Right
$('.right').click(function () {
rotateRight(); // Call
on = 1; // Set delay on
});
// Left
$('.left').click(function () {
rotateLeft(); // Call
on = 1; // Set delay on
});
play = setInterval(function () {
rotateLeft()
}, 3000)
// Rotate left
function rotateLeft() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('left');
leftElem.removeClass('left').addClass('back');
backElem.removeClass('back').addClass('right');
rightElem.removeClass('right').addClass('front');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
// Rotate right
function rotateRight() {
if (on == 0) {
var frontElem = $('.p_slider__item.front');
var leftElem = $('.p_slider__item.left');
var backElem = $('.p_slider__item.back');
var rightElem = $('.p_slider__item.right');
frontElem.removeClass('front').addClass('right');
leftElem.removeClass('left').addClass('front');
backElem.removeClass('back').addClass('left');
rightElem.removeClass('right').addClass('back');
setTimeout(function () {
on = 0; // Accept clicks again
}, time)
}
}
$('.p_slider__item img').hover(function () {
clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
$(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
$(this).stop(true, false).animate({ 'top': '0px' }, 300)
play = setInterval(function () {
rotateLeft()
}, 3000)
})
JSFiddle: http://jsfiddle.net/pL03g26f/2/
I am looking to flip an image. I have gotten the css to work using:
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
I am looking to apply this to an image but am unsure of the formatting.
I tried doing:
var flip = "-moz-transform: scaleX(-1),-o-transform: scaleX(-1),-webkit-transform: scaleX(-1),transform: scaleX(-1),filter: FlipH,-ms-filter: 'FlipH'";
And then:
$("#chicken").delay(scrolllen).fadeOut(0).css({ left: 2600 + "px" , top : 2370 + "px" + flip}).fadeIn(0).animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
at a later point, but it doesn't seem to apply.
Are you trying do to something like this?
$('#image').mouseover(function(){
$(this).addClass('flipped');
}).mouseleave(function(){
$(this).removeClass('flipped');
});
the css:
.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}
jsFiddle here
I'd just use a class, like so:
.flipped {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Then just swap the class:
$("#chicken").delay(2000).fadeOut(1, function() {
$(this).addClass('flipped').show()
.animate({ left: 1600 + "px" , top : 2370 + "px"}, 5000, 'linear');
});
FIDDLE
I'm not completely sure I understand what you're looking for.
I'm thinking perhaps it can be done without any JavaScript at all? If you're looking to flip along the X axis, with some animation?
Flipping Image on Hover
JSFiddle: Image Flip on :hover
For this demo, I had to place the image HTML into a wrapper <div>, because otherwise the :hover and the scale() changes conflict with one another in funky ways. You'll understand if you remove the wrapper <div>.
HTML
<div class="flippy">
<img src="http://lorempixel.com/200/200/"/>
</div>
CSS:
.flippy>img {
/**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
transform:scale(1,1);
/**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
transition:all 600ms ease; }
.flippy:hover>img {
/**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
transform:scale(-1,1); }
If you need to control it with JavaScript, it should be easy enough to replace the :hover with another class, like .flipped, then do as you please in JS to activate it's flip state on and off.
//Chase.
Flipping Image on Attribute (click-based demo)
jsFiddle: Image Flip on Attribute
In this demo, the image flips when is has the flipped attribute set.
JavaScript:
// Toggles the 'flipped' attribute on the <img> tag.
$('.flippy').click(function(){
if ($(this).attr('flipped'))
$(this).removeAttr('flipped');
else $(this).attr('flipped','flipped');
});
CSS:
/* vendor-prefixes have been removed in this example */
/* We just change the scale based on the flipped attribute */
.flippy {
transform:scale(1,1);
transition:all 600ms ease; }
.flippy[flipped] {
transform:scale(-1,1); }
HTML: <img class="flippy" src="http://lorempixel.com/200/200/"/> -- as you can see, we no longer need the <div> wrapper for this example, as the :hover conflicts are no longer an issue.
//Chase.
<style type="text/css">
.transform-image {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
</style>
<script type="text/javascript">
$("#chicken").hover(function(){
$(this).addClass("transform-image") },
function () {
$(this).removeClass("transform-image");
};
})
</script>