I've been fighting with jQuery all night and getting quite frustrated here, so forgive me if the answer was staring me in the face.
I have a 5x3 grid of 15 images contained within a <div>, and when I click on one of them, I want it to expand to three times its original size of 150x105 and overlap the rest. I've got the expanding down, but the overlapping isn't quite working.
My current HTML:
<div id="image-grid">
<img src="images/after-pictures/1.jpg" class="igc1" />
<img src="images/after-pictures/2.jpg" class="igc2" />
<img src="images/after-pictures/3.jpg" class="igc3" />
<img src="images/after-pictures/4.jpg" class="igc4" />
<img src="images/after-pictures/5.jpg" class="igc5" />
<img src="images/after-pictures/6.jpg" class="igc1" />
<img src="images/after-pictures/7.jpg" class="igc2" />
<img src="images/after-pictures/8.jpg" class="igc3" />
<img src="images/after-pictures/9.jpg" class="igc4" />
<img src="images/after-pictures/10.jpg" class="igc5" />
<img src="images/after-pictures/11.jpg" class="igc1" />
<img src="images/after-pictures/12.jpg" class="igc2" />
<img src="images/after-pictures/13.jpg" class="igc3" />
<img src="images/after-pictures/14.jpg" class="igc4" />
<img src="images/after-pictures/15.jpg" class="igc5" />
</div>
The igc* class denotes the column the image is in.
CSS:
#image-grid {
border: 1px solid #aaa;
width: 745px;
padding: 5px 2px 2px 5px;
}
#image-grid img {
width: 150px;
height: 105px;
margin: -2px;
}
jQuery:
$('#image-grid img').click(function() {
$(this).animate({
width: '450px',
height: '315px',
zIndex: '10'
}, 200);
});
somewhat like this...
$('#image-grid img').click(function () {
$(this).animate({
width: '450px',
height: '315px'
}, 200)
.css({
'z-index': function (i, z) {
return z + 10;
}, position: 'absolute',
left: 0,
top: 0
})
.siblings().css({
'z-index': function (i, z) {
return z - 10;
}, position: 'static',
width: '150px',
height: '105px',
left: 'auto',
top: 'auto'
});
});
let me know what's the effect..
It could be that you're trying to apply a z-index to elements which have not been given the position absolute property also?
Related
I am using http://roundsliderui.com/demos.html round slider library. I want to show the editable textbox always show not hide. Thank you
Understand, you should supply the code and can get help or suggestions from people here. I took the example you provided and made some changes.
Here is a Working Example: http://jsfiddle.net/Twisty/Lorej7up/
HTML
<div class="slider-wrapper">
<div id="slider">
</div>
<input type="text" id="myToolTip" class="rs-input rs-tooltip-text" style="height: 27px; width: 32px;" />
</div>
CSS
.slider-wrapper {
position: relative;
}
.slider-wrapper input.rs-input {
position: absolute;
top: 95px;
left: 93px;
z-index: 100;
}
jQuery
function updateToolTip() {
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
}
$(function() {
$("#slider").roundSlider({
sliderType: "min-range",
radius: 110,
width: 10,
startAngle: 90,
value: "82",
showTooltip: false,
editableTooltip: false,
drag: updateToolTip,
change: updateToolTip
});
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
$("#myToolTip").change(function() {
$("#slider").roundSlider("option", "value", $(this).val());
});
});
I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {
$(this).animate({
width: "110%",
height: "50%"
}, 'slow');
});
});
</script>
</head>
<body>
<p>
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="4, 14, 67, 34" id="a" class="mapping"
href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping"
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg"
width="800" usemap="#ImgMap0" /></p>
</p></body>
But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?
JS Fiddle link
https://jsfiddle.net/z2Lkf8p0/
You cannot enlarge image's map in any way.
You can do this with another way. I'd created a fiddle for it.
http://jsfiddle.net/ebilgin/141bkx84/
HTML
<div class="container">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<div class="map1 map"></div>
<div class="map2 map"></div>
</div>
CSS
.container {
position: relative;
width: 600px;
}
.container img {
position: absolute;
z-index: 1;
}
.map {
position: absolute;
background: #F0F;
z-index: 2;
}
.map1 {
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
.map2 {
right: 10px;
top: 10px;
width: 100px;
height: 100px;
}
JS
$(".map").on("mouseenter", function () {
$(this).animate({
width: "200px",
height: "200px"
});
});
Area to CSS convert
If all areas types are rectangle its easy. n1,n2,n3,n4
n1: y beginning
n2: x beginning
n3: y ending
n4: x ending
You can convert it.
left: n2;
top: n1;
width: n3 - n1;
height: n4 - n2;
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
alert('Mouse Hovered');
//some statements
});
});
</script>
Good Luck.. ['}
Where I'm At
I've managed to get the location of all of the headshots of politicans in index.html using jQuery's .offset()
Where I'm Stuck
I'm looking to get each individual image's location on the page (using their class or id) and then change the current top and left values of the tooltip (which contains info about each of the politicians), using .offset() so it's appears near/above where the corresponding image of that politician is on the page.
UPDATE #1
#Roko: Can you elaborate on why the positioning needs to be fixed in this case. Likewise, with your suggested change, I can see the HTML for div class="tooltip" style="display: block; top: ... px; left ... px;"></div> but the numbers seem to have shifted the tooltip too much.
Tried:
$('img').each(function(){
var img = $(this);
img.click(function(){
$('.tooltip')
.show(100)
.text(img.attr('alt'))
.offset({
top : img.offset().top + img.height(),
left : img.offset().left
});
});
});
AND
var position = $el.data('.elem'),
ImagePosition = $el.offset(),
ImageSize = {
'width': $el.outerWidth(),
'height': $el.outerHeight()
};
'top': ImagePosition.top - el.outerHeight()
'left': ImagePosition.left - (elelment.outerWidth()/2) + (elementSize.width/2)
scripts.js
// Positioning of the tooltips
$(".headshot").click(function(){
// Fades in the tooltip
$(".tooltip").fadeIn("fast");
// This is the coordinates for current position of a tooltip
var coords = $(".tooltip").offset();
var height = $(".tooltip").height();
console.log(height);
var width = $(".tooltip").width();
console.log(width);
// How do I figure out how much top or left I need to move it?
alert("Top: " + coords.top + " Left: " + coords.left);
console.log(coords);
});
index.html
<div class="tooltip">
<div class="info">
<p class="tooltipName"></p>
<p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
<p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
</div><!-- /.info -->
<div class="arrow-down">
</div><!-- /.arrow-down -->
</div><!-- /.tooltip -->
<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
tooltip.scss
/*----------------------------------
TOOLTIP
----------------------------------*/
.tooltip {
display: none;
position: relative;
left: -12px;
top: -5px;
}
.info {
#include serifLight;
background: $yellow;
color: $black;
font-size: 1.4rem;
padding: 10px;
width: 9%;
text-align: center;
p {
margin: 0px;
}
}
.tooltipName, {
font-family: 'Roboto Slab',serif;
font-weight: 700;
}
.tooltipEthnicity, .tooltipAge {
display: inline;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
jsBin demo
$('img').click(function(){
var img = $(this);
$('.tooltip')
.show(100)
.text( this.alt )
.css({
top : img.offset().top + img.height(),
left : img.offset().left
});
});
and
.tooltip {
display: none;
position: absolute; /* set to absolute */
left: -12px;
top: -5px;
}
also make sure to actually have some value inside the alt="" attribute!
I am using qTip 2 to display a larger image on hover and it semi works. The image shows but not the full width. How do I get it to show full width?
Code:
HTML
<img src="img.jpg" usemap="#Map" class="center" style="width:900px;"
border="0" />
<map name="Map" id="Map">
<area class="1" shape="rect" coords="4,3,225,150" />
</map>
JS
var $j = jQuery.noConflict();
$j('.1').qtip({
content: '<img src="img1.jpg" width="600" />',
position: {
my: 'left top',
at: 'right top',
target: $j('.1')
},
style: {
classes:
'ui-tooltip-tipsy'
}
});
What should I do to get the image to show full width?
I tried adding this code and it did not work:
tip: {
width: 600
}
you only have to change the max-width of your css file:
.ui-tooltip, .qtip{
max-width: 900px; /* Change this? */
}
See this example at jsfiddle
HTML:
<p>
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=1" data-pic="http://www.dummyimage.com/600x600/4c6aff/000000.png&text=1">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=2" data-pic="http://www.dummyimage.com/300x300/4c6aff/000000.png&text=2">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=3" data-pic="http://www.dummyimage.com/150x150/4c6aff/000000.png&text=3">
</p>
JAVASCRIPT
$(function() {
$("img").each(function() {
$(this).qtip({
content: {
text: function(api) {
return "<img src='" + $(this).attr("data-pic") + "' class='dit'>";
}
}
});
});
});
CSS
p {
margin-top: 50px;
margin-left: 100px;
}
img {
padding: 10px;
}
.ui-tooltip, .qtip{
max-width: 10000px; /* Change this? */
}
I am using jquery Tiny Carousel for sliding images but our client asks for continuous scrolling in a same direction i searching it for a day and i cant found the exact thing... Did anyone here came across it?
Now i am using this plugin for tinycarousel
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#slider").tinycarousel({ axis: 'x', display: 1, interval: true })
});
</script>
and i found that with this the looping is not possible anyone know how to loop this? or point me an another slider jquery control....
I do this
in jquery.tinycarousel.js Search for function initialize () and replace
iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
with
iSteps = 9999999999999999999999999;
OR
in jquery.tinycarousel.min.js Search for
u=Math.max(1,Math.ceil(k.length/e.display)-x);
and replace with u = 9999999999999999999999999;
Then
put this code in document ready
$('#slider1').tinycarousel({'display':3});
var SliderLength = $('#slider1 .viewport li').length;//set li or img or what ever
var append = $('#slider1 .viewport > ul').html();//grab the curent items
$('.buttons.next').mouseup(function()
{//next button click event
$('#slider1 ul').append(append);//append those item
var sliderWidth = parseInt($('#slider1 .overview').width());
var curLength = parseInt($('#slider1 li').length);
$('#slider1 .overview').width((sliderWidth * (curLength / SliderLength) ));//update content width
});
Demo
Here is a demo using the jQuery.carouFredSel-plugin
HTML
<div id="wrapper">
<div id="carousel">
<div>
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
<span>Apple</span>
</div>
<div>
<img src="img/fruit2.png" alt="fruit2" width="200" height="200" />
<span>Mandarin</span>
</div>
<div>
<img src="img/fruit3.png" alt="fruit3" width="200" height="200" />
<span>Banannas</span>
</div>
<div>
<img src="img/fruit4.png" alt="fruit4" width="200" height="200" />
<span>Cherries</span>
</div>
<div>
<img src="img/fruit5.png" alt="fruit5" width="200" height="200" />
<span>Orange</span>
</div>
<div>
<img src="img/fruit6.png" alt="fruit6" width="200" height="200" />
<span>Melon</span>
</div>
<div>
<img src="img/fruit7.png" alt="fruit7" width="200" height="200" />
<span>Lemon</span>
</div>
<div>
<img src="img/fruit8.png" alt="fruit8" width="200" height="200" />
<span>Grapes</span>
</div>
<div>
<img src="img/fruit9.png" alt="fruit9" width="200" height="200" />
<span>Peach</span>
</div>
<div>
<img src="img/fruit10.png" alt="fruit10" width="200" height="200" />
<span>Pear</span>
</div>
<div>
<img src="img/fruit11.png" alt="fruit11" width="200" height="200" />
<span>Strawberry</span>
</div>
<div>
<img src="img/fruit12.png" alt="fruit12" width="200" height="200" />
<span>Melon</span>
</div>
</div>
</div>
JavaScript
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 10,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
position: relative;
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border-top: 1px solid #ccc;
width: 100%;
height: 50%;
margin-top: -1px;
position: absolute;
left: 0;
top: 50%;
}
#carousel {
margin-top: -100px;
}
#carousel div {
text-align: center;
width: 200px;
height: 250px;
float: left;
position: relative;
}
#carousel div img {
border: none;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
line-height: 22px;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 30px;
left: 50%;
border-radius: 3px;
}
Try this one
$(function(){
var current = 1;
var totalImages = $("#slider-code li").size();
var oSlider = $('#slider-code').tinycarousel({
animation:false,
controls: false
});
$('#nextButton').click(function(){
current += 1;
if(current > totalImages){
current = 1;
}
oSlider.tinycarousel_move(current);
});
});
and here is the demo in jsfiddler
This is what I coded in a situation like yours. This scrolls up, but you can easily modify it to scroll in any direction. Change the algorithm from marginTop modification to:
marginTop increase by 1, for up to down scroll
marginLeft increase by 1, for left to right scroll
marginLeft decrease by 1, for right to left scroll
(function($)
{
var ScrollMe = function(element)
{
var elem = $(element);
var obj = this;
elem.wrapInner("<div class='mbui_scrollable'></div>");
var scr=elem.children("div.mbui_scrollable");
setInterval($(this).scrollUp,130); //CHANGE HERE FOR SPEED
};
$.fn.scrollme = function()
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('scrollme')) return;
// pass options to plugin constructor
var myplugin = new ScrollMe(this);
// Store plugin object in this element's data
element.data('scrollme', myplugin);
});
};
$.fn.scrollUp = function(elem)
{
var allObj=$(".mbui_scrollable");
for(i=0;i<allObj.length;i++)
var s=$(allObj[i]).css('marginTop');
var n=parseInt(s)-1; //CHANGE HERE TO CHANGE DIRECTION AND SPEED
var h=$(allObj[i]).css('height');
if((n*-1)>=parseInt(h))
n=$(allObj[i]).parent().css('height');
$(allObj[i]).css('marginTop',n);
};})(jQuery);
Apply to elements like:
$(".scroll").scrollme();
For my iPhone app's website (niwuzzles.com) I used Alen Grakalic's jQuery plugin EasySlider to accomplish this.
Project Description:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
Continuous Slide demo:http://cssglobe.com/lab/easyslider1.7/01.html
Code Example:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
<li><img src="img4.png" /></li>
</ul>
</div>
</body>
I made some changes to Tiny Carousel to add looping. I just picked up on some stuff from the timed sliding function.
http://pastebin.com/3M3akv9r
i think it must work
$('#slider1').tinycarousel({start: 2,
interval: true
});
Finally i found the slider here
http://javascript.about.com/library/blcmarquee1.htm