can I get some help here please
I got a code that is working for only one image but cannot for multiple images with different content
HTML
<ul id="base">
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
</ul>
CSS
.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;}
.element img {
position:absolute;
top:0;
left:0;
height:150px;
width:150px;
}
.content {height:150px;width:150px;background:gray;font-size:9px;}
jQuery
$(".element").hover(function() {
//fadeout first image using jQuery fadeOut
$(".img1").fadeOut(300);
//fadein second image using jQuery fadeIn
$(".content").fadeIn(300);
}, function () {
//fadeout second image using jQuery fadeOut
$(".img1").fadeIn(300);
//fadein first image using jQuery fadeIn
$(".content").fadeOut(300);
});
and a fiddle for testing http://jsfiddle.net/nQvay/1/, need some help
You must specify whose .img1 and .content you want to be faded
$(".element").hover(function() {
//fadeout first image using jQuery fadeOut
$(this).children(".img1").fadeOut(300);
//fadein second image using jQuery fadeIn
$(this).children(".content").fadeIn(300);
}, function () {
//fadeout second image using jQuery fadeOut
$(this).children(".img1").fadeIn(300);
//fadein first image using jQuery fadeIn
$(this).children(".content").fadeOut(300);
});
Try this
JSFIDDLE
$(document).ready(function(){
$(".element").hover(function() {
//fadeout first image using jQuery fadeOut
$(".element").children(".img1").fadeOut(300);
//fadein second image using jQuery fadeIn
$(".element").children(".content").fadeIn(300);
}, function () {
//fadeout second image using jQuery fadeOut
$(".element").children(".img1").fadeIn(300);
//fadein first image using jQuery fadeIn
$(".element").children(".content").fadeOut(300);
});
});
<ul id="base">
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
</ul>
<style>
ul{
padding:0px;
margin:0px;
list-style:none;
}
.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;position:relative;}
.element img {
position:absolute;
top:0;
left:0;
height:150px;
width:150px;
}
.content {height:150px;width:150px;background:gray;font-size:9px;}
</style>
<script>
$(".element").hover(function() {
//fadeout first image using jQuery fadeOut
$(this).children(".img1").fadeOut(300);
//fadein second image using jQuery fadeIn
$(this).children(".content").fadeIn(300);
}, function () {
//fadeout second image using jQuery fadeOut
$(this).children(".img1").fadeIn(300);
//fadein first image using jQuery fadeIn
$(this).children(".content").fadeOut(300);
});
</script>
Related
In jquery, I need to dynamically display first two values and after while click remaining values should be display?
<div class="category_items">
<div class="category_item">
<div class="test">test1_1</div>
<div class="test">test1_2</div>
<div class="test">test1_3</div>
<div class="test">test1_4</div>
<div class="test">test1_5</div>
<div class="test">test1_6</div>
</div>
<button>Show / Hide</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script>
var elems = $('.category_item', '.category_items').filter(function() {
return $(this).children().length > 2;
}).hide();
$('button').on('click', function() {
elems.toggle();
});
</script>
I want to display first two items by default when i click the button i want show full list
Do this with css with
HTML
<style>
li div{display:none;}
li:hover div {display:block;position:absolute;left:200px;width:100px;height:100px;background-color:red;}
</style>
<ul>
<li>123<div>1</div></li>
<li>222<div>2</div></li>
<li>333<div>3</div></li>
</ul>
enter code here
:gt selector will be good for this situation. I hope, this code helps you.
<script>
$('.category_item .test:gt(1)').hide();
$('button').on('click', function() {
$('.category_item .test:gt(1)').toggle();
});
</script>
If you want to change the number of elements which you want to show, just change number in gt() selector.
See this also but I not sure if is normal to use span as child of ul not li but you can put in last li another ul and when show this new ul.
This all li is show when zou hover ul bu zou can do to show all li onli when hove some think one as example + hover last show li(user no need to click to see al!).
<style>
ul span{display:none;}
ul:hover span {display:block;/*position:absolute;left:200px;background-color:red;*/}
</style>
<ul>
<li>123<div>1</div></li>
<li>22<div>2</div></li>
<span>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
</span>
</ul>
i want to close the iframe box as soon as i hit esc or i click outside the iframe area at the moment i have to click back on hideshow icon to hide the iframe again is there a method that i can use to close the iframe with esc or clicking outside the iframe area
index.php
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message" >
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
hide-show.js
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
});
mycss.css
#message
{
display:none;
position: absolute;
z-index: 1;
}
the question how can i press esc key or click outside the msg_pic_link div to close message
Try using $(window).on("click keydown") , .is()
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
$(window).focus()
});
$(window).on("click keydown", function(e) {
//e.preventDefault()
if (e.keyCode === 27 || !$(e.target).is(function() {
return $("#message, #hideshow")
})) {
$("#message").hide()
}
}).focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message">
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
jsfiddle http://jsfiddle.net/pb47m0om/2/
I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.
My Javascript is as follows :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
My HTML code is as follows :
<div id="menu">
<ul>
<li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>
<li>Activation Response Generator </li>
<li>Decode Support Key</li>
<li>Decode Recovery Key</li>
</ul>
<div id="tab-1" >
<div id ="main">
<div align=center>
<table style="padding-top:20px;"> <tr>
<td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " /> </td>
<br/>
</div>
<?php session_start();$user = $_SESSION['usr'];?>
</br>
<tr>
<td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> <u> HAVE A GREAT DAY </u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> Logout </b> </font></td>
</tr>
</div>
</div>
<div id="tab-2">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-3">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-4">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
</div>
Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.
CodePen
.overlay {
position: fixed; /* or absolute if inside a div */
width: 100%; height: 100%;
background: white;
}
At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.
$(document).ready(function(){ $('.overlay').fadeOut(); });
You can also spice it up, and put a loading message inside the overlay.
<div class="overlay">
<h1>Loading</h1>
</div>
.overlay h1 {
position: absolute;
top: 45%; /* nearly the center, good enough for a second of visibility */
text-align: center;
width: 100%;
}
I have an e-commerce site where I'm displaying all my products and the thumbnails need to be centered in a div. The centering works in IE(even in compatibility mode), FF, and Opera, but fails in Chrome and Safari. In Chrome and Safari the image stays on the top of the div and does not center. I've changed my CSS around trying to locate the problem, but I can't seem to find what's causing the issue? Anyone see anything?
IE (GOOD)
CHROME (BAD)
JQUERY
var _h = $('div.product-image').height();
$('div.product-image img').each(function()
{
var _top = (_h - $(this).height()) / 2;
$(this).css('margin-top',_top);
});
CSS
.product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
.product-image
{
margin:2px auto;
width:194px;
height:145px;
text-align:center;
border:1px solid #999;
}
.product-image img
{
max-height: 100%;
max-width: 100%;
border:1pc solid #999;
}
HTML
<div id="content">
<a href="#">
<div class="product">
<div class="product-image">
<img src="1.jpg" />
</div>
<div class="product-model">sadf</div>
<div class="product-price"> : 234</div>
</div>
</a>
<a href="#">
<div class="product">
<div class="product-image">
<img src="2.jpg" />
</div>
<div class="product-model">sdaf</div>
<div class="product-bottom"> : 2345</div>
</div>
</a>
</div>
Here's the Fiddle link : http://jsfiddle.net/anaZD/
You might check this, it worked for me:
How to vertical align image inside div
div {position:relative;}
img {position:absolute;top:0;bottom:0;margin:auto;}
.image {min-height:50px}
div is your .product-image
img is .product-image img
Perhaps the problem is with margintop. jQuery CSS uses 'marginTop' rather than 'margin-top' and you might want those images instead to be positioned relatively based on your calculations on the original script.
Here is an example, can you clarify if that's what you are trying to accomplish? See attached the JsFiddle
The Javacript
var a=$;
a.noConflict();
var CountP=new Array();
jQuery(function(a){
a("div.product-image img").each(function(b,c){
CountP[c]=(( a(this).parent('div').parent('div').height() - a(this).height() ) / 2) +'px';
//Alert as we go for testing
alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );
To ensure browser compatibility try with marginTop for CSS or like in this example,
position:relative; top and left values;
a(this).css({'border':'2px inset red','position':'relative',
'top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});
})
});
Below a test on jsfiddle.net.. hope it help you out!
http://jsfiddle.net/mt5fk/93/
With your provided images ;) The JS is the same but it does not allow me to update with the link
var a=$;
a.noConflict();
var CountP=new Array();
jQuery(function(a){
a("div.product-image img").each(function(b,c){
CountP[c]=(( a(this).parent('div').parent('div').height() - a(this).height() ) / 2) +'px';
alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );
//to ensure browser compatibility try with marginTop for CSS or like in this example, position:relative; top and left values;
a(this).css({'border':'2px inset red','position':'relative','top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});
});
});
New JSFiddle
http://jsfiddle.net/mt5fk/94/
I'm new to jQueryUI and I'm not able to drag multiple <li> elements to the drop area. However I managed to drag one and drop it on the drop area. Please can anyone help me with this.
JavaScript
$(function() {
$trash= $( "#trash" );
$("a", ".polaroids").draggable({
zIndex: 999,
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("a", ".polaroids").selectable();
$trash.droppable({
accept: ".polaroids a",
activeClass: "custom-state-active",
drop: function( event, ui ) {
$(this).append(ui.draggable);
}
});
});
Here is the <div> in which the <li> elements are dragged but one by one
<div class="st_view_container">
<div class="st_view">
<?php
foreach($gpID as $k => $v) {
?>
<div id="stv_content_<?php echo $v;?>" class="st_tab_view st_first_tab_view">
<ul class="polaroids" id ="polaroids">
<?php
$sql2=mysql_query("select * from user_group WHERE group_id='$v' AND user_id=3");
$i=1;
while($row=mysql_fetch_array($sql2)) {
$memid=$row['member_id'];
$sql1=mysql_query("select * from users_profile WHERE uid='$memid'");
while($row1=mysql_fetch_array($sql1)) {
$ufname=$row1['fname'];
$ulname=$row1['lname'];
$upic=$row1['profile_pic'];
?>
<li>
<a href="#" title="<?php echo $ufname; ?>">
<img src="../<?php echo $upic; ?>" rel="<?php echo $row1['uid']?>" width="65px" height="65px" />
</a>
</li>
<?php
if($i%6==0) {;}
$i++;
}
?>
</ul>
</div>
<?php } ?>
</div> <!-- /.st_view -->
</div> <!-- /.st_view_container -->
and here is the <div> in which i want the multiple elements to be dropped, but not one by one.
<div id="trash" style="width:200px; height:200px; border:1px solid;">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
Here is a demo based on some research…
Is it possible to link two jquery.ui draggables together?
grouping draggable objects with jquery-ui draggable
Can't drop jquery ui helper on droppable
How to reimplement jQuery's default helper in a custom helper
and me playing with the jQueryUI droppable photo manager demo which is what you are using as a template.
Functionality includes single click and drag (as is the default behaviour) or use Ctrl+left click to select multiple items and then drag. The drag helper function is used to select all the items with class="selected" and the drop function is customised to extract the img elements from the container the drag helper added them to. The other function simple enables the Ctrl+click behaviour.
The following code is duplicated below from the demo but does require jQuery, jQueryUI and one of the jQueryUI themes.
HTML
<ul id="draggable">
<li><img src="nature-q-c-50-50-1.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-2.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-3.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-4.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-5.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>
<div id="trash">
<h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash"></span></h4>
</div>
CSS
body {
font-family:"Trebuchet MS";
}
#draggable {
margin:0;
padding:10px;
width:300px;
list-style-type:none;
background-color:#000;
}
li {
display:inline;
}
img {
border:5px solid white;
}
.image-group img {
margin-right:5px;
}
#trash {
margin-top:10px;
width:200px;
height:200px;
border:1px dotted #000;
}
.selected {
border-color:#aed0ea
}
#trash h4 {
margin:0;
padding:0 5px;
}
.ui-icon {
display:inline-block;
}
JavaScript
$('#draggable li').draggable({
revertDuration:100,
helper:function() {
var selected = $('#draggable img.selected');
if (selected.length === 0) {
selected = $('img', $(this)).addClass('selected');
}
console.log('selected', selected);
var container = $('<div class="image-group"/>');
container.append(selected.clone());
console.log('container', container);
return container;
},
cursorAt:{ left:25,top:25 }
});
$('#trash').droppable({
drop: function(event, ui) {
var newItems = $(ui.helper).find('img').clone(false)
.removeClass('selected');
$(this).append(newItems);
console.log('ui.draggable', ui.draggable);
$('#draggable img.selected').parent().remove();
}
});
$('#draggable li').click(function(event) {
if (event.ctrlKey) {
$('img', $(this)).toggleClass('selected');
}
});