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');
});
});
Related
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;
}
I wanted to rotate an image by css and javascript. I do not have much knowledge in css. I have tried by transform.
my css :
.rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
Here is the fiddle before applying rotating css.
And here is the fiddle after applying css.
I want output like this attachment
EDIT:
For more clear insight Image rotation is working fine. I am having problem in css. When i am adding css class it is overlaping top buttons. I need to rotate and adjust image in a way that image never overlap my buttons and my page footer.
Can anyone suggest me how can I adjust image that after rotating it will adjust his position and will not overlap top buttons or footer design?
Any suggestion will be appreciated.
Let's start by giving the image an id:
<img id="image" alt="Web_ileana-d-cruz" class="" src="https://photochute-dev.s3.amazonaws.com/uploads/event_image/image/108/web_ileana-d-cruz.jpg?c=1435318866">
Now just grab both the image and the rotate button by id and add an event listener to the rotate button:
var image = document.getElementById("image");
var rotateButton = document.getElementById("rotate_image_button");
rotateButton.addEventListener("click", function(e) {
e.preventDefault();
if(image.className === "rotate-90") {
image.className = "";
} else {
image.className = "rotate-90";
}
return false;
});
And that's it.
Basically on click you check whether or not the image has the rotated class and then just add/remove it.
This is even simpler if you use jquery. If the image can have more than just 1 class then you would need to use:
if((image.className+" ").indexOf("rotate-90 ") !== -1) {
image.className = (image.className+" ").replace("rotate-90 ", "");
} else {
if(image.className) {
image.className += " rotate-90";
} else {
image.className = "rotate-90";
}
}
JSFiddle: http://jsfiddle.net/wo6mos9r/3/
To add to the first answer;
If you want the rotation to be animated aswell, you need to add this bit of CSS;
img {
transition: rotate 0.5s ease;
}
Please note that you will need browser prefix to make it work in all CSS3 browsers.
Update
With more info from the user, this problem seems to be a duplicate of Rotated elements in CSS that affects their parent's height correctly
I am answering it because someone can get help from this answer.
After some research and help from SO great users I have found solution of this issue.
Solution:
I needed to translateY(-100%) with transform origin and needed to set min height and width to image container div.
.rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
}
After loading image I have set min height and width by js:
$("#single_image .cropBox img").load(function() {
$("#single_image").css("minWidth", this.getBoundingClientRect().width)
$("#single_image").css("minHeight", this.getBoundingClientRect().height)
});
Here is the fiddle
I am trying to create a div which would look as a box, and then it would automatically rotate to show different texts within it.
The effect in question is as shown in the 'RATATOUILLE', 'LASSITUDE', 'MURMUROUS', PALIMPSEST' & 'ASSEMBLAGE' buttons on the page:
http://tympanus.net/Development/CreativeLinkEffects/
I did use the code from a previous project written by someone else (author unknown).
I have a cube div, with 4 panels in it, and first 2 panels marked initial panel and next panel
<div class="cube flip-to-bottom">
<div class="initialpanel"><span>1st Panel</span></div>
<div class="nextpanel"><span>2nd Panel</span></div>
<div><span>3rd Panel</span></div>
<div><span>4th Panel</span></div>
</div>
both styled
.initialpanel {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.nextpanel {
-webkit-transform: rotateX(-90deg) translateZ(-25px);
-moz-transform: rotateX(-90deg) translateZ(-25px);
-o-transform: rotateX(-90deg) translateZ(-25px);
-ms-transform: rotateX(-90deg) translateZ(-25px);
transform: rotateX(-90deg) translateZ(-25px);
}
and finally a class which enables flip on the cube div
.flipNow {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
Tying these two together is my javascript which would go through the cube's children div, renaming through each iteration to animate using CSS.
function startRotating(currentIndex) {
current = $(".cube >div.initialpanel");
nextCurrent = current.next();
next = $(".cube >div.nextpanel");
nextNext = next.next();
var flipNow = setTimeout(function(){
$(".cube").addClass("flipNow");
}, 2000);
var stopFlip = setTimeout(function(){
$(".cube").removeClass("flipNow");
current.removeClass("initialpanel");
next.addClass("initialpanel");
next.removeClass("nextpanel");
nextNext.addClass("nextpanel");
}, 3000);
setTimeout(function(){
if(nextNext.length ===1){
startRotating($("div.initialpanel"));
}
},4000);
}
This code is supposed to rotate panel 1 and show panel 2, and rotate panel 2 and show panel 3, and rotate panel 3 and show panel 4 and stop after panel 4 as there are no more panels.
The rotation and revelations occour as expected, but due to removing flipNow class and renaming children div classes, the flip reverts back to initial position and then rotates to its new position. This is a link where a working copy of my problem is being hosted: http://jsfiddle.net/fatgamer85/m71osbLt/4/
any help would be appreciated which would help me to stop the double rotation on every panel reveal.
Thanks
I modified your fiddle (quite heavily) to give you a general case for N sided figure (in my example it's 5): fiddle. If you need further explanation, ask.
So previously I had been figuring out how to specify which transition activates when a specific page is selected, I figured it out.
Now....I'm curious why there is a trailing section of the previous page when I transition out of my selected effect. Upon each click, you'll notice a trailing, fading section of the previous page:
Example: http://codepen.io/anon/pen/BzFjk
If you take a look at the original page then you'll see what I'm going for:
The goal: tympanus.net (go to Choose a transition > Rotate > Room)
There are many attributes such as the code below specifying the styling for rotateroomLeftOut and rotateRoomLeftIn...etc. But I've matched them exactly to the original code and it still doesn't look like.
#-webkit-keyframes rotateRoomLeftOut {
to { opacity: .9; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
#-moz-keyframes rotateRoomLeftOut {
to { opacity: .9; -moz-transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftOut {
to { opacity: .9; transform: translateX(-100%) rotateY(90deg); }
}
#-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
#-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
There is an opacity in your keyframes which is causing the colors to "trail"
Removing the opacity from the keyframes seems to solve your problem:
#-moz-keyframes moveFromRight {
from { -moz-transform: translateX(100%); }
}
Codepen
I think I found it, the culprit: pt-page-ontop
In all your cases (54 to 57) this class was added (in JS) the the page that moves out...
case 54:
inClass = 'pt-page-rotateRoomLeftIn';
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
break;
...I don't know why this doesn't have the same effect on the tympanus-page, but if I change it to this...
case 54:
inClass = 'pt-page-rotateRoomLeftIn pt-page-ontop';
outClass = 'pt-page-rotateRoomLeftOut';
break;
...it works without the trail.
(You still see a veil of the out-page disappearing, but notice that's also the case on the tympanus-page, but there the transitions are just faster so you don't really see it).
Example: http://codepen.io/anon/pen/dxwuk
(BTW, your CodePen HTML had double html- and body-tags inside the body-tag, CodePen probably fixes that for you on rendering, but better check your code twice)
UPDATE
If you combine MathiasaurusRex' answer with this one, you will lose that last veil as well. Fiddle around with that to see what you like best..
I had the "same" problem months ago.
CSS - <p> leaving a trail when sliding
Sadly I didnt find any good solution, i had to use a PNG image to solve it :(
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>