I'm working on a GMaps application to retrieve images, via getJSON(), and to populate a popup marker.
The following is the markup which I add to the marker dynamically:
<div id="images"></div>
<div id="CampWindow" style="display:none;width:550px;height:500px;">
<h4 id="camp-title"></h4>
<p>View... (all links open in new windows)</p>
<ul>
<li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li>
<li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li>
</ul>
<p id="message"></p>
I've been clawing out my eyes and woohoo for the past couple of days, trying to get the images to show inside the CampWindow . Then, I decided to think laterally and to see if the images were being retrieved at all. I then moved the images outside and sure as Bob (Hope), the images were being retrieved and refreshed with every click.
So, I decided to the keep the images outside and then once loaded, append it to the CampWindow . It's not working still; when I append the div to the main CampWindow div, the images won't show. I check in Firebug with the pointer thingy and it shows me the images as empty. I try it again with the images outside and it shows the images. I've tried before append and appendTo with no success. Am I missing something here?
I have no more woohoo to claw out. Please, please help.
marker.clicked = function(marker){
$("#images").html('');
$('#camp-title').text(this.name);
$('#camp-hp-link').attr('href', this.url);
$('#camp-av-link').attr('href', this.url + '/tourism/availability.php');
$('#camp-vi-link').attr('href', this.url + '/tourism/general.php');
// get resort images via jQuery AJAX call - includes/GetResortImages.inc.php
$.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages);
function RetrieveImages (data)
{
if ('failed' == data.status)
{
$('#messages').append("<em>We don't have any images for this rest camp right now!</em>");
}
else
{
if ('' != data.camp)
{
$.each(data, function(key,value){
$("<img/>").attr("src", value).appendTo('#images');
});
}
}
}
//.append($("#images"));
$("#CampWindow").show();
var windowContent = $("<html />");
$("#CampWindow").appendTo(windowContent);
var infoWindowAnchor = marker.getIcon().infoWindowAnchor;
var iconAnchor = marker.getIcon().iconAnchor;
var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y);
map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset});
}
markers.push(marker);
});
When you add the <html> tag to your page it confuses the browser and is most likely the problem. I would suggest to either do as Pointy said and use window.open() to make a popup window (check out this tutorial), or better yet try out one of the many jQuery light box plugins.
I'm not sure what you are doing with the google maps, so I decided to just go with a basic example for you. With this script, if you click on an image inside the #image div, it'll open a popup window the same size as the image.
$(document).ready(function(){
$('#images img').click(function(){
var padding = 20;
var w = $(this).width() + padding;
var h = $(this).height() + padding;
var popup = '\
<html>\
<head>\
<link type="text/css" href="popup-style.css" rel="stylesheet" />\
<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr'+'ipt>\
</head>\
<body>\
<img src="' + $(this).attr('src') + '">\
</body>\
</html>';
var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
pop.document.write(popup);
pop.document.close();
})
});
NOTE: When adding a script tag inside a string, make sure you break up the word "script" otherwise you will get an error.
Update #2:
Ok, since you want to work with what you have, try doing this:
Remove the <html> tag from your campwindow, then position your campwindow using CSS and/or javascript. Add something like:
var w = $(window).width();
var h = $(window).height();
// Add overlay and make clickable to hide popup
// you can remove the background color and opacity if you want to make it invisible
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Position your popup window in the viewport
$('#CampWindow').css({
position: 'absolute',
top : $(window).scrollTop() + 50 + 'px',
left : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
zIndex : 100
})
.fadeIn('slow');
// Click overlay to hide popup
$('#overlay').click(function(){
$('#CampWindow').hide();
$(this).remove(); // remove the overlay
})
Related
I'm using PHP to dropdown a main menu. My menu looks like this:
<ul class="dropdown_top">
<li style="width:20px;"> /*main categories, width is an exapmle i don't realy know the exact width */
<ul style="margin-left:-10px>
<li></li> //subcategories
...
</ul>
</li>
<li> //main categories
/* the code i'm looking for, must do something like this: */
<?php
$style = - widthOfThePreviusMainCategoryLi() + marginLeftOfThePrevius_Ul_Li_Ul() = -30px ;
?>
<ul style="margin-left:<?=$style?>;"> /* this ul margin-left is the problem */
<li ></li>
...
</ul>
</li>
</ul>
I need to get the width of the previous list item and calculate the current margin.
I saw an example with the jQuery function outerWidth(), but I can't figure out how I can use that in my case.
I tried this after the menu is published, but what am I doing wrong?
<pre><code>
<script type=text/javascript>
$(document).ready(function(){
var number = $("#topmenu li").size();
var marginSum = -10; //the first
for(i=2;i < number; i++)
{
marginSum = marginSum - $("#topmenu li").slice(0,(i-1)).outerWidth(true); //OR
marginSum = marginSum - $("#topmenu li:eq("+(i-1)+")").outerWidth(true);
alert("Μargin of "+i+": "+marginSum + " prev width:"+$("#topmenu li:eq("+(i-1)+")").outerWidth(true)+" Margin:"+marginSum); //OR
alert("Μargin of "+i+": "+marginSum + " prev width:"+$("#topmenu li").slice(0,(i-1)).outerWidth(true)+" Margin:"+marginSum);
// $("#topmenu li").width(width);
}
});
</script>
</code></pre>
I believe that the function outerWidth(true); also calculates the nested ul, but I don't know that for sure.
That will need a lot of work on the server side because there's no way of knowing the width of an element unless you make a lot of calculation like calculate the number of characters the font size and weight maybe borders or margins and paddings, anyway the best way to do that in the client side with Javascript or like you said with jQuery.
It's better to do it wwith pure CSS, here's some videos tutorials on how to do that:
Creating a 100% CSS dropdown menu by Free Web Tutorials.
Adam khory's video.
PHPAcademy's video.
Hope this help.
I have solved this. This is my code:
<script>
function setMenuInPlace(){
//fix ul category menu
$('.dropdown_top .dir').css({'margin-left' : '0'});
var totalLis_w = num =0;
var dtopWidth = $('#topmenu .dropdown_top').width();
//set nested ul in place
var mLeft = $('.dropdown_top').offset().left;
var myLeft = mLeft + 2; //Left per 2 pixels for leaving a small space
// alert (mLeft);
$('.dropdown_top li ul').offset({left : myLeft});
//calculate free space for lis
$('.dropdown_top .dir').each(function(){
num ++;
totalLis_w += $(this).outerWidth(true);
// alert($(this).outerWidth(true));
});
var dtop_free = dtopWidth - totalLis_w;
var mLeft_Li = (dtop_free/ num) -2 ; //leaving a small space 2 pixels.
if(mLeft_Li > 0)
$('.dropdown_top .dir').css({'margin-left' : mLeft_Li});
// alert(\"lis width\"+totalLis_w+\" free space:\"+dtop_free+\" mLeft\"+mLeft_Li);
}
( function($) {
$(document).ready(function(){
setMenuInPlace();
});
//$(window).load(function(){
// setMenuInPlace();
//});
$(window).resize(function() {
setMenuInPlace();
});
} ) ( jQuery );
</script>
Class "dir" are the main categories list items: <li class="dir">.
I have just started out with .php/Java can someone show me how to get my bootstrap progress bar to increment in accordance with a users set time.
Progress Bar:
Code:
<div class="progress progress-striped active">
<div id="progressbar" class="bar" style="width: 0%;"></div>
User Input Example:
Code:
Set Seconds:
<input type="text" id="speed" value="10" />
<input type="submit" value="Start" onclick="doProgress();" />
Java Script {needed}:
Code:
<script type="text/javascript">
function doProgress()
{
Idk :( Please help.
};
</script>
(style="width: 0%;") Is the progress bars value 100% being maximum.
I want the value to increase in accordance to the users set value in seconds using this element I provided:
<input type="text" id="speed" value="10" />
example: the user enters 30 I want it to take 30 seconds for the progress bar to reach 100%
Something like this (untested):
function doIncrement(increment) {
w = parseInt(document.getElementById('progressBar').style.width);
document.getElementById('progressBar').style.width= (w + increment) +'%';
}
var w
var speed = document.getElementById('speed').value;
var increment = (speed/100);
for(var x = 0; x<speed; x++)
{
setTimeout(doIncrement(increment),1000);
}
The setTimeout approach (as per other answers) is the most common approach for animating time-based progress.
But I've had a problem with setTimeout if the speed is fast or when I want to reset the bar from 100% to 0%, as the default Bootstrap css transitions lead to undesirable animation effects (i.e takes 0.6 seconds to return to 0%). So I suggest tweaking the transition styling to match the desired animation effect e.g
pb = $('[role="progressbar"]')
// immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
// now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
setTimeout(function() {
pb.attr('aria-valuenow', counter);
pb.css('width', counter + '%');
pb.text(counter + '%');
if(counter<100) {
counter++;
update_progress();
}
}, 5 * 1000 / 100); // 5 seconds for 100 steps
};
update_progress();
But if you're in the jQuery camp, then jQuery.animate is I think a neater approach as you can forget having to mess with css transition styling and counting steps etc e.g.
pb = $('[role="progressbar"]')
pb.css('transition', 'none'); // if not already done in your css
pb.animate({
width: "100%"
}, {
duration: 5 * 1000, // 5 seconds
easing: 'linear',
step: function( now, fx ) {
var current_percent = Math.round(now);
pb.attr('aria-valuenow', current_percent);
pb.text(current_percent+ '%');
},
complete: function() {
// do something when the animation is complete if you want
}
});
I've put a demo and more discussion on GitHub here.
I'm just learning bootstrap myself and came up with this for advancing it. As mentioned in other answers, the width CSS property appears to be what triggers the animation, but I initially didn't notice it and set the related aria attribute. You probably want to ensure setting the width results in other related attributes getting properly updated if a11y is important to you, setting them as necessary if not.
$( function() {
var bar = $('div.progress-bar');
var val = null;
i1 = setInterval(function() {
val = parseInt(bar.attr('aria-valuenow'));
val += 10;
console.log(val);
if( val < 101) {
bar.attr('aria-valuenow', val);
bar.css('width', val + '%');
} else {
clearInterval(i1);
}
}, 1000);
});
Try this:
//Find the div you want to update
var divArray = document.getElementById('progressbar');
//Set the width style
divArray.style.width = '100%';
I have a vanilla flexslider installation on my site. The slider operates by cycling through list items in an unordered list. You can add captions simply by adding a caption container after the list item. This works well with hard coded images.
The problem I am facing is that my site has multiple sections, with a different slide show for each section. Instead of hard coding the li elements, I'm generating them with php, so that when a user visits a page, the php figures out which page the user is viewing, and passes that through to the slideshow. The slideshow then finds the proper image directory and loads all of the images in that directory whether there be two or twenty. It's much easier than hard coding each slideshow, and it works beautifully.
<?php
$dh = "image/slideShows/$slideShow/";
$images = glob($dh . "*.jpg");
foreach($images as $image){
?><li><img src="<?php echo $image;?>" alt="caption text" /></li><?php
}
closedir($dh);
?>
I need to get flexslider to read the alt text for each dynamically generated image, and then place it in a caption container:
<p class="caption">The alt text should show up here.</p>
I've tried using:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: "#slideShowContainer",
start: function(slider) {
$('.caption').html(this.alt);
},
});
});
and playing around with flexslider's current.slide to no avail. I've been searching on this all night and I can't seem to figure this one out. I'm hoping someone here can provide the missing link for me.
Thanks in advance.
EDIT: I figured this out, and it was seriously a matter of over-complication. All I had to do was call the EXIF data that I was using for the "alt" attribute inside of the caption. I have no idea why it took me so long to realize this. Thank you both for your help!
start: function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber + 1).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
},
before: function(slider) {
var slideNumber = (slider.currentSlide + 1);
var alt = $('.slides img').eq(slideNumber + 1).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
}
It sounds like you have only one .caption box? And you want its contents to change with each slide?
I would try something like:
before: function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
});
},
note that before runs at each slide transition, not just once like start
Edit
OP adjusted the above code (see comments below), but still has the "issue mentioned in the comment where the first image doesn't get a caption on it's second and subsequent scrolls"
Perhaps we should be using after instead of before? That way we don't need to do slideNumber+1 (since before was making this the previous slide.. You can perhaps remove the start function in favor of just doing this above the flexslider call
in $(window).load(function(){ or (document).ready(){:
var alt = $('.slides img').eq(0).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
and within flexslider()
after:function(slider) {
var slideNumber = slider.currentSlide;
var alt = $('.slides img').eq(slideNumber).attr('alt');
$('.caption').html('<p>' + alt + '</p>');
},
I'm working on a gallery that pulls up a full image inside a tooltip when hovering over thumbnails. The problem is, these full images commonly go outside the viewfinder. To remedy this, I'm moving the tooltip if the image will go outside the window boundaries, which requires immediately knowing the images dimensions (to avoid the tooltip jumping around).
However, the images take a bit to load (.gifs) so I can't wait on DOM in order to get the dimensions. So, I'm calling a PHP script to return the the image dimensions before they load.
The problem I'm having is that there's no response from my $.get call. I know the PHP script is working fine, but I'm not getting any data back from it through jquery. Any help would be greatly appreciated. Thanks!!
hover.js:
this.imagePreview = function(){
$("a.preview").hover(function(e){
var viewHeight = $(window).height() + $(window).scrollTop();
var viewWidth = $(window).width();
var xOffset=e.pageX+40;
var yOffset=e.pageY+40;
var url = 'http://mysite.com/i/' + this.href.slice(20);
var w = 0;
var h = 0;
$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
$.get("getDimensions.php/?img=" + url, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
});
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
$('#img').load(function() {
if((e.pageX+img.width)>viewWidth) { xOffset=e.pageX-img.width-70; }
if((e.pageY+img.height)>viewHeight) { yOffset=e.pageY-img.height-70; }
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
});
},
function(){
$("#preview").remove();
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
getDimensions.php:
<?php
list($width, $height, $type, $attr) = getimagesize($img);
echo json_encode(array("w"=>$width,"h"=>$height));
?>
$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
when u append the img which have src prop,that will not fire load event any more.That's the problem is.
Have you tried..
var rand = Math.floor(Math.random()*11);
$.get("getDimensions.php/?img=" + url + "&r=" + rand, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
},"json");
( Also, I would strongly recommend .ajax over .get)
Can you view what you are getting back from getDimensions.php (in firebug)?
My guess is that jQuery has no way of knowing that the data returned from getDimensions.php is JSON (as opposed to plain old text), and it isn’t trying to parse it.
What's the value of data (if you print it out to the console)?
If this is the problem, you can solve it by adding this line to the PHP script, before echo:
header('Content-Type: application/json');
I have a link that says remove I have hidden the like by
< div id="remove_$id" style="display:none">< /div>
and then i want to be able to roll over a < tr id="$id" > and then remove comes up only for that id and when you roll off it the remove will be hidden I cant get the jquery code right for it to work
Can some one help me please
First off, give the div a class:
<div id="remove_$id" class="mydiv">
...
</div>
with:
div.mydiv { display: none; }
and
$(function() {
var id = this.id;
$("tr").hover(function() {
$("#remove_" + id).show();
}, function() {
$("#remove_" + id).hide();
});
});