So im currently learning jquery and a little bit of tweenlite for animations (I wanna keep it basic). So im currently building a portfolio grid but I wanna add on a click of an element that the other element is fading in (sliding from right it doesn't matter).
But I can't find a way to make it work that 1 element have 1 box to show and the other element have a different box to show without coping the code over and over and change a simple number everytime, there must be a way to make it work without going to repeat the code over and over.
I created a codepen to show where my struggles are.
I hope I'm pretty clear with describing this problem :)
HTML
<div class="box">
<div class="show">Show 1</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 1</div>
</div>
</div>
<div class="box">
<div class="show">Show 2</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 2</div>
</div>
</div>
</div>
CSS
.container {
overflow: auto;
margin: 0 auto;
width:500px;
}
.box {
height:200px;
width:200px;
background:yellow;
text-align:center;
cursor:pointer;
margin:0 auto;
float:left;
margin-right:50px;
}
.bigbox {
height:100%;
width:100%;
background-color: grey;
z-index:100;
left:0;
opacity: 0;
position: fixed;
display:none;
top:0;
.removeit {
height:100px;
width: 100px;
top: 0;
right:0;
background-color: blue;
margin:0 auto;
cursor:pointer;
}
}
.show {
display:block;
}
.noscroll {
overflow:hidden;
}
Javascript
$(".box").click(function(){
$(".bigbox").addClass("show");
TweenLite.to($('.bigbox'), 0.5, {
opacity:1,
autoAlpha:1
});
});
$(".removeit").click(function(){
TweenLite.to($('.bigbox'), 0.5, {
autoAlpha:0,
opacity:0
});
});
The codepen
http://codepen.io/denniswegereef/pen/MwjOXP
As I mentioned in comments, I think it is possible by finding the common ground between box and bigbox and if we are to not modify HTML. That common ground should be the index value from their respective classes.
So store a clickedIndex variable first, inside the click handler
like so: var clickedIndex=$('.box').index($(this));.
And then feed this clickedIndex to get a selective bigbox like so: var
bigbox=$(".bigbox").eq(clickedIndex);.
And finally, use this bigbox variable further to fade in or out.
Here is your modified JavaScript:
var bigbox = null;
var clickedIndex = -1;
var boxElements=$(".box");
var bigboxElements=$(".bigbox");
var removeItElements=$(".removeit");
boxElements.click(function() {
clickedIndex = boxElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
bigbox.addClass("show");
TweenLite.to(bigbox, 0.5, {opacity: 1,autoAlpha: 1});
});
removeItElements.click(function() {
clickedIndex = removeItElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
TweenLite.to(bigbox, 0.5, {autoAlpha: 0,opacity: 0});
});
The only problem with this approach is that it is very dependant on the order with which the HTML has been laid out.
Related
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to make a site that uses a "grid" that looks just like the one on www.uve.info/en/ (middle of the page, under "Services") and has the same effect while hovering.
I've made divs with classes "black-cell", "grey-cell" and "white-cell" and ordered them the same way they did. White cells have a negative z-index and are moved left (odd rows) or right (even rows) by 33%. That way, they stay invisible under grey or black cells.
It's easy to get the desired result on odd rows:
.grey-cell:hover + .odd
visibility: visible
right: 0
, but the problem arises when I try to do the same thing with white cells in even rows because the HTML structure is different (white cell - black cell - grey cell) and I can't target the previous div.
Unfortunately, I can't use flexbox to change the order of elements due to some reasons that are not important for this topic. I've tried using jquery function "insertBefore", but it changes the HTML structure and doesn't help here.
So, is there a way to change the order of the elements without flexbox, OR to target the previous div with CSS/SASS?
In the site you're refering to, the structure seems to be the same for the two types of effects (move to the left & move to the right).
<div class="item [...]">
<div class="col [...]">[...]</div>
<div class="col [...]">[...]</div>
<div class="col-hover">[...]</div>
</div>
Actually, you can see that for the "Cycle hire" effect (2nd one), there is another "indent" class for the main container of the row (class "item").
<div class="item indent [...]">[same structure as above]</div>
It looks like this class is driving the animation to the left when it's written.
Then, if you take the element having class "col-hover", it's displayed "absolute" and positioned at left:50% inside the class "item".
.item .col-hover {
left: 50%;
}
But, for "item" and "indent", it's overwritten to be at left: 0.
That way, the element is positioned under the central block, which is the second for a transition to the right, and the first for moving to the left.
So when "item" is hovered, "col-hover" goes to the right :
.item:hover col-hover {
left: 100%;
}
But if the element which has the "item" class also has "indent" class, then the "col-hover" goes to left:-50% (to the left)
.item:hover.indent .col-hover {
left: -50%;
}
So you can keep the same structure and play with absolute position for the element you want to move.
I suppose you have noted the transition on "col-hover" for the animation, changing the left property making the element moving.
Hope this helps !
Please mind the code its a little dirty clean it but it works like you want.
<html>
<head>
<style type="text/css">
.box
{
width:200px;
height:200px;
background:rgba(0,0,0,120);
margin:0 auto;
color:White;
}
.big-box
{
height:200px;
width:600px;
color:White;
position:absolute;
border:1px solid black;
z-index:-1;
-webkit-transition:all 0.3s;
}
.big-box1
{
top:0px;
left:-200px;
text-align:right;
}
.big-box2
{
top:200px;
left:200px;
text-align:left;
}
.big-box > .box
{
display:inline-block;
}
.par
{
position:relative;
height:400px;
width:600px;
margin:0 auto;
border:1px solid black;
overflow:visible;
}
.b1:hover~.big-box1
{
left:0px;
}
.b2:hover~.big-box2
{
left:0px;
}
</style>
</head>
<body>
<div class="par">
<div class="box b1">One</div>
<div class="box b2">Two</div>
<div class="big-box big-box1">
<div class="box">OneC</div>
</div>
<div class="big-box big-box2">
<div class="box">TwoC</div>
</div>
</div>
</body>
</html>
Was messing around with this question for a warm up, it's not fully thought through but I'll post in case some of it helps.
fiddle
https://jsfiddle.net/Hastig/7Lb427m4/2/
css
.blocks-wrapper {
font-size: 0;
margin-bottom: 10px;
position: relative;
text-align: center;
}
.block {
display: inline-block;
height: 200px; width: 200px;
}
.hidey {
font-size: 15px;
z-index: -1;
color: red;
position: absolute;
left: 50%;
top: 50%; bottom: 50%;
transition: all 1s ease;
}
.blocks-wrapper:nth-child(odd) .block:nth-child(1) { }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) { }
.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {
left: 15%;
}
.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {
left: 75%;
}
html
<div class="blocks-wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
Have tried using the previous sibling selector ~
.grey-cell:hover ~ .even{
visibility: visible;
left: 0;
}
I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.
.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>
Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>
Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle
Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});
I have the following Jquery/JavaScript snippet I'm working on.
Basically it's a Object Orientated image slider. See the code on JSBin: http://jsbin.com/eloduj/3/edit#html,live
The problem is that when I click the slider navigation controls it only slides once in each direction! How can I get this to work properly as there are 4 image DIVs?
Any help would be appreciated greatly, Thank you
ANSWER (After some help from rdcmk) Sharing is caring
JS
var cn = {
hero : function(r,rc,lx,rx){
rc=$(rc),rcw=rc.width(),rca=rc.size(),rw=rcw*rca;$(r).css({'width':rw});
$(lx).click(function(){n=$(r).position().left-rcw; $(r).animate({left:(n<-rw+rcw?0:n)+'px'},500);});
$(rx).click(function(){n=$(r).position().left+rcw; $(r).animate({left:(n>0?-rw+rcw:n)+'px'},500);});
}
}
$(function(){
cn.hero('#reel', '#reel div', '#reel-left', '#reel-right');
});
HTML & CSS
* { padding:0; margin:0; outline:none; font-family:Arial, Helvetica, sans-serif; }
#wrap { width:1024px; margin:0 auto; }
#hero { border:1px dashed lime; position:relative; width:1022px; height:304px; overflow:hidden }
#hero #reel { border:1px dashed red; position:absolute; height:302px; left:0; }
#hero #reel div { width: 1018px; height:300px; float:left; }
#reel-controls { position: absolute; z-index:10; }
<div id="hero">
<div id="reel">
<div id="pic1" style="background-color:#C3F"></div>
<div id="pic2" style="background-color:#0F9"></div>
<div id="pic3" style="background-color:#999"></div>
<div id="pic3" style="background-color:#6CC"></div>
</div>
<div id="reel-controls">
<span id="reel-left">left</span>
<span id="reel-right">right</span>
</div>
</div>
I think I got it: http://jsbin.com/eloduj/14/edit#html,live
the answer is quite simple. You are currently doing something equivalent to x=3 while you want x=x+3..
do something like this (pseudo-code)
$(leftCtrl).click(function(){
var currentLeft = $(reel).offset().left;
$(reel).animate({ left: currentLeft-reelChildWidth }, 500 );
});
$(rightCtrl).click(function(){
var currentlLeft = $(reel).offset().left;
$(reel).animate({ left: currentLleft+reelChildWidth }, 500 );
let me know if this is good enough or if you need a running example.