jquery div movement using css with panel changes - javascript

quite a large question here. Basically im making a site that has a central heading when you load the index.html but i want to use jquery to modify the header to move it to the top of the page in a transition when the user clicks a link, in addition i want the content to fade once the header has risen. So altering the panels by changing display: hidden;
If someone could offer a solution it would be greatly appreciated [im fairly new to js and havent done jquery before but it seems like jquery is the best library to use]
<!DOCTYPE html>
<html>
<head>
<title>Chris Calcroft • Arbitrator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/stuff.js"></script>
</head>
<body>
<div class='header'>
<img src='img/header.jpg' alt='header'>
<ul class='headerNav'>
<li id='about' onclick='pageChange(id);'>about</li>
<li id='projects' onclick='pageChange(id);'>projects</li>
<li id='contact' onclick='pageChange(id);'>contact</li>
</ul>
<div>
</body>
</html>
JS:
$(function pageChanger(id) {
$("id").click(function() {
$(".header").toggleClass(".header-transition");
});
});
CSS:
#font-face {
font-family: avant;
src: url('font/avant.ttf');
}
html {
background-color: black;
color: white;
font-family: avant;
}
.header {
position: fixed;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -450px;
-webkit-transition: top 2s ease,
left 2s ease,
margin-left 2s ease,
margin-top 2s ease,
position 2s ease;
}
.header-transition {
top: 0;
left: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;
position: static;
display: block;
}
li {
text-decoration: none;
display: inline;
padding: .2% 1.3%;
}
li:hover {
color: gray;
}
This is what I have so far. I hit a wall when trying to pass the correct id to the jquery for it to toggle the class.
Thanks guys :)

$("id") means all elements that their tag names are id
you must use id in the function as below but however I don't think this is what you want.
$(function pageChanger(id) {
$("#"+id).click(function() {
$(".header").toggleClass(".header-transition");
});
});
if I have understood your case you should do:
$('.headerNav li').click(function(){
$(".header").toggleClass(".header-transition");
});
for more about selectors visit jquery selectors
Edit:
If each li will do something different then you should either give them ids and do:
$('#about').click( function(){
......
});
$('#project').click( function(){
......
});
$('#contact').click( function(){
......
});
and do this for all others. or:
$('.headerNav li').click(function(){
switch($(this).attr('id')){
case 'about':
//do something
case 'project':
//do something else
case 'contact':
//do another thing
}
});

A few things are wrong at first glance:
You are binding your click event twice - both via inline HTML onclick handler, and via jQuery click() method in your script.
The function you are binding in your onclick events has a different name to the one you're defining in your script, so nothing will be called when the event fires.
You're defining a named function inside your closure e.g. $(function pageChanger(id)...
This doesn't look right to me but I might be wrong on this.
The way you're passing your id to the function on each click event is wrong.
In your onclick statements you're passing 'id' to the function, which I assume you mean to be the value of the element's ID attribute, but this will not work.
On the other hand, in your script, you define your function's parameter as 'id', but then refer to it inside the function as a string in quotes i.e. "id". Because of this, your jQuery selector object $("id").click, in this form, is telling jQuery to select an 'id' element, which is invalid (there is no 'id' element in HTML).
Maybe a little off-topic here but I hope the above can help to improve your general knowledge of JS / jQuery.
What you can do is stick with the click() method in your script but, rather than use it in a function, you can simply bind it to your list elements directly.
Note: you might be better to put anchor elements inside your list elements and attach the click event to those as this is semantically better markup, and should avoid failed event firing in legacy browsers (I think IE7 doesn't listen to click events that aren't bound to anchor elements).
Try the following:
Change links to -
<li>Link text</li>
Change JS to this -
$(function(){
$(".headerNav a").click(function(e){
var elem = $(e.target), // e.target points to the element that triggered the event
elemId = elem.attr("id");
// it isn't clear what each unique element's click event will do, but here is where you defien that logic
})
})
Using e.target in a jQuery object is a much cleaner and more efficient way to dynamically bind an event to multiple elements.
I hope you find some / any of this useful.

The following code will toggle the header css on every list item click.
$(document).ready(function(){
var currentCssClass = $(".header").attr("class");
$(".header > ul > li").click(function(){
$(".header").toggleClass("header-transition");
});
});
Demo

Related

Cannot remove class from div with Javascript

I'm trying to create a class on a div and then delete it. First I thought just do like I did before with toggleClass, but that doesn't seem to work, because I'm adding a class to an ID instead of a Class. I want my header to have a black background top as well with the class: headerbg.
Also I have a small question about the color of my hamburger menu. I wanted to have a toggle for colors of the white lines (orange instead of white) on the class when pressed on the hamburger menu.
My live version where it is on, works only when 1024px or smaller
My Javascript
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
$("header").addClass('headerbg');
});
});
My CSS
.hamburger div{
height: 3px;
background-color: white;
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.hamburger {
width: 30px;
display: none;
margin: 3em 3em 3em 0;
float: right;
transition: all 0.75s 0.25s;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.hamburger:hover div {
width: 30px;
}
.hamburger.closed {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#media only screen and (max-width: 1024px) {
.menu {
width: 100%;
background: #000;
margin: 0;
display: none;
}
.show {
width: 100%;
background: #000;
margin: 0;
display: block;
}
.headerbg {
background: #000;
}
.hamburger {
display: block;
}
}
If anyone maybe could lead me to a good example or even better help me out I would really appreciate it! Just came back after 2,5 years break from HTML/CSS as well.
Thanks for looking at the question!
Your understanding of DOM elements seems to be vague. Let's break it down.
I'm trying to create a class on a div and then delete it.
What is it here, what are you trying to delete? The class or the element?
..., because I'm adding a class to an ID instead of a Class.
That's not technically possible. You can't add a class to an id, nor can you add an id to a class. You can only add/remove/modify the id attribute of a DOM element and you can add/remove classes to the className property of a DOM element, referenced in markup by the class attribute.
To keep it short, using jQuery, you can select one or multiple elements by ID, by class, by attribute or by attribute value (in fact, by any valid CSS selector that matches the element), and you can apply the .toggleClass(), .addClass() or .removeClass() methods (or any other jQuery methods) to that element (or to each element in the collection, if they are more than one).
To clarify things for you here's what your current code does:
$(document).ready(function(){
/* when all the DOM has finished building... */
$(".hamburger").click(function(){
/* do the following when an element with class "hamburger" is clicked: */
$(".hamburger").toggleClass("closed");
/* toggle class `closed` on all elements with class "hamburger"
(not only on clicked one!) */
$(".menu").toggleClass("show");
// toggle class `show` on all elements with class "menu"
$("header").addClass('headerbg');
// add class "headerbg" to all <header> elements in page
});
});
Addition, as per OP comment:
First I want to add the class .headerbg on the <header> when I click on the .hamburger class, then when I click on the .hamburger class again I want to delete/remove the class .headerbg for the <header>
This will do it:
/*
* place the following inside an instance of
* $(document).ready(function(){...})
*/
$('.hamburger').on('click', function(){
$('header').toggleClass('headerbg');
})
Note:
$(selector).click(function(){...}) is a shortcut for
$(selector).on('click', [child-selector,] function(){...}). I personally recommend using the latter for all event binding functions to develop a consistent pattern of binding. It helps in the long run, when maintaining code. Also, it allows binding on elements that are not yet in DOM, by using the optional child selector argument. For example, if you wanted to do the binding before .hamburger was created in DOM, you could have, with the following syntax:
$(window).on('click', '.hamburger', function(){
$('header').toggleClass('headerbg');
})
The main difference is the first syntax binds an event listener on each and every instance of .hamburger it finds at the time the binding is done (document.ready in your case).
The second syntax binds only one event, on window object and evaluates at the moment of click if it was fired from inside an element with class .hamburger or not. This means that if you have 1k elements with class .hamburger, you don't bind an event on each of them (resulting in 1k listeners). Also, it has the great advantage that it will work on elements that are added to the page after the binding is done (because evaluation is done at the click event, not at the ready event.
To be even more precise and clear, there are two syntax choices here.
1. Choose between:
.click(function(){...})
.on('click', function(){...})
I always go for second, because it's consistent across all event listeners (it doesn't matter what I put as first argument, instead of click - also, it allows to bind on more than one event type at once: .on('click tap swipe', function(){...}))
2. Choose between
$(child-selector).on('click', function(){...})
$(parent-selector).on('click', child-selector, function(){...}).
If there is only one instance of child-selector and it's already in DOM at the time you do the binding, choose first. If there are more than one instances of child-selector and you want each one present inside parent-selector, use second.
Theoretically speaking, you want as few event listeners as possible, so instead of 2 listeners, one on each child is better to have a single listener on a parent.
Also, best practice is to use the smallest parent selector possible. For example, if you know all your child-selectors will always be contained in a div holding your content — say $('#main') — it's best to bind on that container rather than on $('<body>') or $(window). This will make your code not be evaluated against a click event triggered outside of $('#main'), which in both theory and practice makes your page faster and lighter, for a better user experience.
in your #header you should toggle the headerbg not just adding it :
then your jquery must be :
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
if($("#header").hasClass("headerbg")){
$("#header").removeClass("headerbg");
}
else
{
$("#header").addClass("headerbg");
}
});
});
if you need to add the styles of the ID you should pass it through the attr function . like this
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
$("header").addClass('headerbg');
$("header").attr('id','#header');
});
});
and you can delete it like this
$("header").attr('id','');
this way you can toggle it

How can I toggle background color and toggle slide at the same time?

I want to toggle background-color and slideToggle on click. I also want a hover-over effect on all buttons. My hover-over effect stops working after the first click. I also haven't figured out a good way to toggle background-color as you will see by my code.
Here is my jsfiddle. This JavaScript code doesn't work if the same button is clicked twice:
$('#11').show().css({'background-color':'#cccccc'});
$('#22,#33,#44,#55,#66').show().css({'background-color':'white'});
Also, if you have any suggestions on how to make my JavaScript code cleaner/shorter, I'd like to see them.
With a little clean up you can simplify this whole thing a lot:
jquery
$(document).ready(function(){
$('.button')
.on('click', function () {
$('.button').not(this)
.removeClass('selected')
$('p.displayed').not($(this).next().next())
.slideUp()
.removeClass('displayed')
$(this)
.toggleClass('selected')
.next(/*br*/).next(/*p*/)
.slideToggle()
.addClass('displayed')
})
});
css
button.selected {
background-color: #ccc;
}
src: https://jsfiddle.net/yLr5equc/14/ (sorry, at first I forgot to hide the previous slideDown.. this is resolved now)
"Also, if you have any suggestions on how to my my javascipt
cleaning/shorter, I'm happy to listen. "
You don't need to repeat $(document).ready(function(){} every time for every new function/object. One $(document).ready(function(){} can store all your javascript/jquery code. That will shorten your code alot and make it less messy.
Like I did here: https://jsfiddle.net/yLr5equc/3/
Because the style defined in CSS has been overridden by jQuery-added inline style, therefore in .button:hover, add !important to background-color to make it the highest priority.
.button:hover {
background-color: #e6e6e6 !important;
cursor: pointer;
}
Updated solution: https://jsfiddle.net/yLr5equc/17/
No more !important as I answered above. I created the class .selected for .button and toggle it instead of inserting the style inline.
.button.selected {
background-color: #ccc;
}
I also have refactored the scripts, now shorter and work more effectively.
$(document).ready(function() {
$(".button").on("click", function() {
var $this = $(this),
$next = $(this).next(".slide");
if($next.hasClass("opening")) {
$this.removeClass("selected");
$next.slideUp("fast").removeClass("opening");
} else {
$this.addClass("selected");
$this.siblings().removeClass("selected");
$next.slideDown("fast").addClass("opening");
$next.siblings(".slide").slideUp("fast").removeClass("opening");
}
});
});

trying to use jQuery switchClass to create a reveal animation

I'm trying to get an element to change its class to one with a different height attribute to make a reveal effect. I'm just getting an error which says uncaught type error undefined is not a function.
html -
<div id="rollup" class="header-container">
<header class="wrapper clearfix">
<h1 class="title"></h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<p class="btnRetract">
see more
</p><!--end div retract -->
</div><!--end div rollup-->
Javascript -
$(".btnRetract").on("click", function() {
var $content = $("#rollup");
switchClasses($content);
     
return false;
 
function switchClasses($content){
if($content.hasClass("header-container")){ 
$content.switchClass("header-container", "header-container-retracted");
}
else {
$content.switchClass("header-container-retracted", "header-container");
}
}
CSS -
.header-container {
border-bottom: 20px solid #e44d26;
height: 90vh;
position:relative;
}
.header-container-retracted {
border-bottom: 20px solid #e44d26;
height: 20vh;
position:relative;
}
That's because switchClass is not a function defined by the jQuery plugin. It is actually part of the jQuery UI framework. However, if you need to "switch" classes using the jQuery plugin you can use either toggleClass, removeClass and addClass. Furthermore, you can even use animate to customise the transitions between property values
You dont need a switchClass function (doesnt exist anyway and is causing your error)
You can use answer from squint or.if you dont want to check.for the existence of one of the classes you can do this all in one line:
$content.removeClass('header-container').addClas('header-container-retracted');
As others have pointed out, it would be easier to use the jQuery toggle method, but there are other issues as well with your Javascript and CSS. Here's a working demo that you can use as an example.
Demo
Javascript:
$(".btnRetract").on("click", function() {
$("#rollup").toggleClass('header-container-retracted');
});
That's all you need for the click handler if you're using the built in toggleClass method. It accepts one string as an argument, which is the name of the class that you want to toggle. You can also have a comma separated list of two class names, wherein it will toggle between the two classes, but in this case, you don't need to swap the classes. You simply want to add or remove your .header-container-retracted class, because your .header-container class has all of your base styles in it. The .header-container-retracted class only has to contain the properties you want to override in the base styles and as long as it is AFTER your base .header-container class in your stylesheet, the normal cascading behavior of CSS will ensure that its properties will override the base properties.
CSS:
.header-container {
position: relative;
border-bottom: 1.5em solid #e44d26;
height: 85vh;
overflow: hidden;
margin: 0;
padding: 0;
-webkit-transition: height 1s ease;
transition: height 1s ease;
background-color: white;
padding: 1em;
}
.header-container-retracted {
height: 3.5em;
}
So, in your CSS, you don't need to repeat any of your styles in the .header-container-retracted. Note also, that I added overflow: hidden to the base styles. Without this, your content "inside" the header-container element would just spill out and be visible when the header-container was "retracted". Also, I add some transitions to give the opening and closing a nice smooth animation. The transitions will not be supported in IE8 or IE9, but they will not prevent the opening/closing of the element. As #Leo pointed out, if the animation is important to you in IE8/IE9 browsers, you can use jQuery's animate method to handle the transitions instead.
Finally, you'll note in the demo that I set your .btnRetractelement absolute positioning. Because you're using relative heights, you need to ensure that your toggle button is always visible. On a very small viewport, 20vh would be so small that it would obscure the button and make it impossible to expand the header-container.

how to show hover effect on a image where i hover my mouse

i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).

how to disable whole body other than a div

I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal
You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;
That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>
What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.
OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...

Categories