I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/
Related
I want to create a vertical slider using jQuery and CSS. Here is my code:
HTML & JavaScript
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
<button id="prev3">∧ Prev</button>
<button id="next3">∨ Next</button>
</div>
CSS
.slideshow {
margin: auto;
position: relative;
overflow: hidden;
height: 200px;
}
.slideshow img {
width: 100px;
height: 100px;
padding: 2px;
}
div.responsive img {
width: auto;
height: auto
}
.cycle-pager {
position: static;
margin-top: 5px
}
JSFiddle
However, it's showing only two images. I want to show 3 or four images.
I also have a CodePen, but it's showing only one slider text.
How can I change and make it 2 to 3?
If you set the height of .slideshow to 312px this should do the job.
See here.
Or even easier, set the data-cycle-carousel-visible=X to the desired amount X of pictures shown. For example data-cycle-carousel-visible=3
I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>
You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/
I have this menu, that (when you hover over an icon) makes the icon bigger. What I tried to achieve is, to have it display correctly from both sizes, which doesn't quite work. It only works from the left side, because of the unordered list, but is there a way to make it work from both sides? (basically so the icon covers the one to the right and the one to the left without pushing it). I have this:
HTML:
<!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul class="menu">
<center>
<img class="icon" src="games.png">
<img class="icon" src="home.png">
<img class="icon" src="contact.png">
<img class="icon" src="wai.png">
<img class="icon" src="wita.png">
</center>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<!-- END OF THE MENU!-->
CSS:
.icon{
display: inline-block;
margin-right: -5;
}
.icon:hover{
width: 155px;
margin: -15px -22px -15px -13px;
}
.menu{
z-index: 10;
}
Thanks for all the help.
If anything, it's all uploaded here (in the right corner menu):
http://goolag.pw/delete2.html
Add the following to your CSS:
.icon{
position: relative;
z-index: 10;
}
.icon:hover{
z-index: 100;
}
By increasing the z-index, the hovered icon is moved up in the DOM-layer, and displayed above the other icons.
You need to use z-index, but in order to do that, you need to add the element a positioning. I tried this and worked:
.menu a:hover{
z-index: 150;
position: relative;
}
You may want to set all the images' z-index property to a negative value and when the image hovers, set it to a positive one. I don't know if this is a bug but that's how it behaves, take a look at this fiddle:
#one {
width: 100px;
height: 40px;
background: red;
z-index: 10;
}
#two {
width: 100px;
height: 40px;
background: blue;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
If you set the first element's z-index to a >0 value, it won't show over the second one until it's z-index is set to something <0.
I was able to use JSfiddle to create a appendTo event. By clicking on the image, I am able to get the caption for those images printed in a list in another div. But what if i wanted it to be appended to another page into a form?
Also, how do i remove an item after its been added? The code that i currently have allows me to appendTo, but I have no idea how to undo this event... any suggestions?
Here is JS fiddle: http://jsfiddle.net/jhyqt5/cBsqN/20/
and the Code:
HTML
<div class="wrapper">
<div class="caption">Blueberry</div>
<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-prn2/1394351_529524313783586_609777864_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Walnuts</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/1377244_529524413783576_249384396_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Craisins</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/1378714_529524353783582_129148654_n.jpg" class="img-circle">
</div>
<br>
<br>
<div class="foodlist">
</div>
CSS
.img-circle {
border-radius: 50%;
height: 140px;
width: 140px;
}
.wrapper {
position: relative;
}
.caption {
background-color: black;
opacity: .7;
text-align: center;
line-height: 120px;
color: white;
position: absolute;
display: none;
border-radius: 50%;
width: 140px;
height: 140px;
}
.wrapper:hover .caption {
display: block;
}
.wrapper.active .caption {
display: block;
opacity: .8;
background: #38ACD5;
}
JS
$('.wrapper').on('click', function () {
$(this).toggleClass('active');
var caption = $(this).find(".caption").text();
$("<li>" + caption + "</li>").appendTo("div.foodlist");
});
Bottomline:
1) appendTo and Undo function
2) appendTo a form on a another page
Thanks :)
You can't modify a page that will be loaded sometime in the future. That page doesn't exist yet.
All you can do is to set some state (in browser cookie, browser local storage or on the server) that the javascript code in that other page can examine and then modify that other page when it is loaded.
I'm using JavaScript with HTML and I have a page that includes multiple iframes. I want to be able to blur some of these iframse (not hide then) so that users can see what is inside these frames but cannot click on them or type in them.
Is there a way to do this?
iframe.contents().find('body').blur()
Something like this may be what you want: http://jsfiddle.net/Paulpro/xcWcn/1/
HTML:
<div id="frame1-blocker" class="frame-blocker"></div>
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>
CSS:
.frame-blocker{
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 500px;
height: 300px;
}
I would suggest positioning a transparent DIV over each "blurred" iFrame to prevent clock events propagating downward. iFrame tags themselves do not to my knowledge provide the functionality you want.
And for what it's worth, "blur" in Web parlance refers to moving the text cursor outside of a control!
Here is a demo of a way using an overlay within the iframe:
#hidden {
display: none;
}
iframe {
width: 200px;
height: 200px;
}
a {
color: #f00;
text-decoration: underline;
cursor: pointer;
}
<div>
<a class="activate" rel="1">Active Test 1</a><br/>
<a class="activate" rel="2">Active Test 2</a><br/>
<a class="activate" rel="3">Active Test 3</a>
</div>
<iframe id="test1"></iframe>
<iframe id="test2"></iframe>
<iframe id="test3"></iframe>
<div id="hidden">
<div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div>
<div>
http://www.yahoo.com/
</div>
</div>
$('iframe').each(function(){
$(this).contents().find('body').append($('#hidden').html());
});
$('div a.activate').click(function(){
$('iframe[id^=test]').contents().find('#overlay')
.css('height','200px')
.css('width','200px')
.fadeTo('fast', 0.5);
$('iframe#test'+this.rel).contents().find('#overlay')
.css('height','0')
.css('width','0')
.fadeTo('fast', 1);
});
http://jsfiddle.net/ZTpXa/