I'm working on my first serious website and i'm stuck on this problem.
First of all I think my JQuery is extremly clumsy and could probably have been done in a more efficient way, would love some help on how to code this better (Feks i probably use to many functions).
Secoundly I need some help with the animation. I want the divs to animate over to the leftside off the container before they open. The way it is now looks so unnatural.
I would appreciate any help.
http://jsfiddle.net/Skaadel/nt8a29gm/1/
HTML
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div id="boks4">TEST</div>
</div>
</div>
</div>
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
#boks1 {
height: 400px;
width: 100px;
background-color: red;
position: relative;
z-index: 15;
}
#boks2 {
height: 400px;
width: 100px;
background-color: blue;
}
#boks3 {
height: 400px;
width: 100px;
background-color: white;
}
#boks4 {
height: 400px;
width: 100px;
background-color: pink;
}
JQUERY
$(document).ready(function () {
$("#boks1").click(function () {
if ($("#boks1").width() == 100) {
$("#boks1").animate({
width: "720px"
});
$("#boks2").css("display", "none");
$("#boks3").css("display", "none");
$("#boks4").css("display", "none");
} else {
$("#boks1").animate({
width: "100px"
});
$("#boks2").css("display", "");
$("#boks3").css("display", "");
$("#boks4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks2").click(function () {
if ($("#boks2").width() == 100) {
$("#boks2").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test4").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks2").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test4").css("display", "");
$(".test3").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks3").click(function () {
if ($("#boks3").width() == 100) {
$("#boks3").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test4").css("display", "none");
} else {
$("#boks3").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks4").click(function () {
if ($("#boks4").width() == 100) {
$("#boks4").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks4").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test3").css("display", "");
}
});
});
I have changed your code somewhat. Changes are as follows:
1) In your HTML added class name boks class="boks" along your inner Div.
2) In your CSS added properties for .boks, #boks1-2-3-4 and .col-sm-3. Also Added class .zindex
3) In your JQuery i changed everything. Have a look and ask if you stuck anywhere.
Working : Demo
JQuery
$(document).ready(function() {
$(".boks").click(function() {
var curId = this.id; //Gives you id of clicked element.
var curWidth = $("#" + curId).width(); // Taking width to check if it's 100px.
var offset = $("#" + curId).offset(); // Taking Position for animating to left.
var leftPos = offset.left;
var firstElementLeftPos = $("#boks1").offset().left;
leftPos = leftPos - firstElementLeftPos;
if (curWidth == 100) {
$(this).parent(".col-sm-3").css('left', '-' + leftPos + 'px');
$("#" + curId).css("width", "720px").addClass('zindex');
} else {
$(this).parent(".col-sm-3").css('left', '0px');
$("#" + curId).css("width", "100px").delay(500).queue(function() {
$("#" + curId).removeClass('zindex');
});
}
});
});
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
/* Edits are to Below CSS */
.boks {
height: 400px;
width: 100px;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
#boks1 {
background-color: red;
}
#boks2 {
background-color: blue;
}
#boks3 {
position: relative;
background-color: white;
}
#boks4 {
background-color: pink;
}
.col-sm-3 {
left: 0px;
transition: 0.5s ease-in-out;
position: relative;
}
.zindex {
z-index: 999;
}
HTML
<div class="row">
<div class="test1 col-sm-3">
<div class="boks" id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="boks" id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="boks" id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="boks" id="boks4">TEST</div>
</div>
</div>
</div>
just to show you how you could reduce your code with using $(this) and class names in jQuery ...
http://jsfiddle.net/nt8a29gm/3/
$(document).ready(function () {
$(".box").click(function () { // check for click on .box
if($(this).width() == 100) { // if this one width is 100
$('.box').not(this).hide(); // hide all but this
$(this).animate({ // animate the one we clicked on
width: "720px"
});
} else {
$(this).animate({ // make this one small again
width: "100px"
}, 900, function() { // 900 is animation speed
// Animation complete. // wait this animation is finished
$('.box').not(this).show(); // show all boxes again
});
}
});
});
HTML see class="box"
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div class="box">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="box">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="box">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="box">TEST</div>
</div>
</div>
</div>
Related
JS: My problem is in running the following JS script, it's supposed to be very easy ,i think, but i can't understand why won't it run. I've just started coding and i'm already stuck in this problem. I want the text to go up (by increasing the bottom in CSS) for 5px until it reaches pos=6 ; then clearInterval should do its job.
CSS: I've put the position of div's to RELATIVE as i've read in some tutorials but didn't put the " container's " position to ABSOLUTE, may it be the problem?
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: ;
width: 100%;
background-color: ;
margin: 0px;
padding: 0px;
}
#generale {
height: 100%;
width: 100%;
}
#intestazione {
height: 7%;
width: 100%;
float: left;
background-image: url(immagini/sfumatura.png);
position: static;
}
#profilo {
position: static;
float: right;
width: 12%;
height: 100%;
}
.testo_rialzato {
position: relative;
float: right;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 20px;
background-color: transparent;
}
</style>
</head>
<body>
<div id="generale">
<div id="intestazione">
<div id="profilo"></div>
<div class="testo_rialzato sumba">
<p>Sp</p>
</div>
<div class="testo_rialzato ap">
<p>App</p>
</div>
<div class="testo_rialzato te">
<p>Te</p>
</div>
<div class="testo_rialzato do">
<p>Dom</p>
</div>
<div class="testo_rialzato big">
<p style="line-height:70%; margin-top:8px; text-align:center;">Big</p>
</div>
</div>
<script>
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
ez.onmouseover = alza();
var intervallo = setInterval(alza, 100);
function alza() {
var pos = 0;
if (pos = 6) {
clearInterval(intervallo);
} else {
ez.style.bottom = pos + "px";
}
}
</script>
</div>
</body>
</html>
First thing is , why declaring you are using event on an array of dome node (result of querySelectorAll will return array of domenodes ) so in order to attach mouseover and also apply some style you have to loop around those nodes .
Seconde thing while declaring set interval, its usless to use mousemovehere ?
Also the condition if is wrong you're using assignment , so you have to use == or === in order to make comaparison .
See below snippet :
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
var pos = 0;
var intervallo = setInterval(alza, 100);
ez.forEach(function(el){
el.addEventListener("mouseover", alza);
})
function alza() {
if (pos == 25) {
clearInterval(intervallo);
} else {
ez.forEach(function(el){
el.style.bottom = pos + "px";
});
pos++;
}
}
.sumba, .ap {
position:absolute;
}
.ap {
color:red;
left:40px
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="sumba">Text</div>
<div class="ap">Text 2</div>
try this
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate">ggg</div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
It seems there is a mistake in targeting the child element, it seems not to work on hover.
$(document).ready(function() {
$('.requested_user').on('mouseenter', function() {
var currentIdMouse = $(this).attr('id');
$('#' + currentIdMouse + ' .requested_user').css("text-decoration", "underline");
$('#' + currentIdMouse + ' .requested_user').css("color", "blue");
$('#' + currentIdMouse + ' .popup_window').show();
});
$('.requested_user').on('mouseleave', function() {
var currentIdMouse = $(this).attr('id');
$('#' + currentIdMouse + ' .requested_user').css("text-decoration", "none");
$('#' + currentIdMouse + ' .requested_user').css("color", "white");
$('#' + currentIdMouse + ' .popup_window').hide();
});
});
.requested_user {
width: 100px;
height: 20px;
}
.requested_user:hover {
cursor: pointer;
}
.popup_window {
position: relative;
left: 20px;
top: -10px;
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="requested_user" id="item1">
item1 content
<div class="popup_window" id="item1">item1 popup content</div>
</div>
<div class="requested_user" id="item2">
item2 content
<div class="popup_window" id="item2">item2 popup content</div>
</div>
Fiddle: https://jsfiddle.net/xht48eLg/
You don't need the id lookup at all. The this is the requested_user in the handler, and the popup_window is a child of it.
$(document).ready(function() {
$('.requested_user').on('mouseenter', function() {
this.style.textDecoration = 'underline';
this.style.color = 'blue';
$('.popup_window', this).show();
});
$('.requested_user').on('mouseleave', function() {
this.style.textDecoration = 'none';
this.style.color = 'white';
$('.popup_window', this).hide();
});
});
.requested_user {
width: 100px;
height: 20px;
}
.requested_user:hover {
cursor: pointer;
}
.popup_window {
position: relative;
left: 20px;
top: -10px;
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="requested_user" id="item1">
item1 content
<div class="popup_window">item1 popup content</div>
</div>
<div class="requested_user" id="item2">
item2 content
<div class="popup_window">item2 popup content</div>
</div>
So close, just change .live for .on, such that:
$('.requested_user').live('mouseenter', function() {
becomes $('.requested_user').on('mouseenter', function() {
and $('.requested_user').live('mouseleave', function() {
becomes $('.requested_user').on('mouseleave', function() {
Check out the updated version of your Fiddle: https://jsfiddle.net/MarcDBosse91/xht48eLg/1/
Also, as stated in the comments by #Peter Darmis:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live() api.jquery.com/live
I've next code:
$(function () {
$('#delete-button').click(function () {
deleteElementsBelow('#parent-container', 'element-2');
});
function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
var deleteOthers = false;
$(parentContainerSelector).children().each(function () {
var $elem = $(this);
if (deleteOthers) {
$elem.remove();
} else if ($elem.hasClass(deleteBelowSelector)) {
deleteOthers = true;
}
});
}
});
#parent-container div {
background-color: red;
width: 20px;
height: 20px;
margin: 10px;
}
#parent-container div:nth-child(2n) {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
<button id="delete-button" type="button">Delete</button>
</div>
Is it possible to do action deleteElementsBelow by native jQuery API?
You could use something like $(parentContainerSelector + " ." +deleteBelowSelector).nextAll("div").remove() to remove all div after the target element.
This will remove divs with class element-3 and element-4
$(function () {
$('#delete-button').click(function () {
deleteElementsBelow('#parent-container', 'element-2');
});
function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
var deleteOthers = false;
$(parentContainerSelector + " ." +deleteBelowSelector).nextAll("div").remove()
}
});
#parent-container div {
background-color: red;
width: 20px;
height: 20px;
margin: 10px;
}
#parent-container div:nth-child(2n) {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
<div class="element-4"></div>
<button id="delete-button" type="button">Delete</button>
</div>
I am trying to scroll to an item inside a div container. The scroll to top function works however it seems to overshoot the item.
Javascript
<script>
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
</script>
HTML:
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>
So the end is to scroll to the div item with class name highlight_bg
Not sure where am going wrong?
Your Javascript code is actually working. So maybe a CSS issue ?
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
/* DEMO STYLISING PART */
.directoryitem {
display: block;
height: 90%;
width: 90%;
background-color: #CCC;
border: 5px solid gray;
}
.highlight_bg {
background-color: green;
}
/* SCROLL PART */
html, body {
height: 100%;
width: 100%;
}
.directory {
position: relative;
height: 100%;
width: 100%;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>
I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.