This is javascript I use to make all markers and set click listener
var infowindow = new google.maps.InfoWindow();
var markernovi, i;
for (i = 0; i < lokacije.length; i++) {
var ll = lokacije[i][2];
var latlng = ll.split(',');
markernovi = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1])),
map: mapObject,
icon: 'img/pins/' + key + '.png',
});
google.maps.event.addListener(markernovi, 'click', (function (markernovi, i) {
return function () {
infowindow.setContent(lokacije[i][0]);
infowindow.open(mapObject, markernovi);
}
})(markernovi, i));
markers.push(markernovi);
}
}
google.maps.event.addDomListener(window, 'load' , initialize);
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And I have this to list all locations on page :
<?php
foreach($lokacijebuy1 as $sve) {
?>
<div class="col-lg-6 col-md-12 col-sm-6">
<div class="img_wrapper">
<div class="img_container">
<a href="#" onclick="myClick(0);" >
<img src="http://evidentiraj.me/gkcard/slikemjesta/<?php echo $sve['photo']; ?>" width="800" height="533" class="img-responsive" alt="">
<div class="short_info">
<h3><?php echo $sve['ime2']; ?></h3>
<em><?php echo $sve['adresa']; ?></em>
<p>
<?php echo $sve['opis2']; ?>
</p>
</div>
</a>
</div>
</div><!-- End img_wrapper -->
</div><!-- End col-md-6 -->
<?php }
?>
And no matter which one I click only infowindow I open is the first one in array.
You can see page live here : http://evidentiraj.me/gorskikotarcard/locationsbuy.php
And I found that the only thing I need to change to display other marker is number inside myClick
<a href="#" onclick="myClick(1);" >
ANSWER:
only thing I did was to add counter in my <a href tag
Now it looks like this:
<?php
$counter = 0;
foreach($lokacijebuy1 as $sve) {
?>
<div class="col-lg-6 col-md-12 col-sm-6">
<div class="img_wrapper">
<div class="img_container">
<a href="#" onclick="myClick(<?php echo $counter; ?>);" >
<img src="http://evidentiraj.me/gkcard/slikemjesta/<?php echo $sve['photo']; ?>" width="800" height="533" class="img-responsive" alt="">
<div class="short_info">
<h3><?php echo $sve['ime2']; ?></h3>
<em><?php echo $sve['adresa']; ?></em>
<p>
<?php echo $sve['opis2']; ?>
</p>
</div>
</a>
</div>
</div><!-- End img_wrapper -->
</div><!-- End col-md-6 -->
<?php
$counter++;
}
?>
It's because you render the a element with function myClick with input argument set to 0, and you use this argument as an index in the markers array inside your function, which is still the first marker in the array. You need to change the way you render the a element to get results like this:
Related
I have a hover effect (with 'div' slide up on a hover), but it works not properly - for some reason it opens on every element in the grid, but I need it to be only on mouseover element
$(document).ready(function() {
if($(document).width() > 992) {
$('.one').hover(function() {
var color = $(this).css('background-color'),
hint = $(this).parent().find('.morehover');
if (($(hint).text()).trim() == "") return 0;
$(hint).css('border-top-color', color).clearQueue().delay(500).slideDown();
}, function() {
var hint = $(this).parent().find('.morehover').first();
$(hint).clearQueue().delay(500).slideUp();
});
}});
and
<div class="one">
<?= $f_AdminButtons ?>
<div class="img-logo-cat"> <img src="<?= $f_imagelogocatalogue ?>" alt="">
<div class="link-not-link">
<?= $f_linkShow ?>
</div>
</div>
<div class="image"><img src="<?= $f_phoneImage ?>" alt=""></div>
<div class="line"></div>
<div class="more">
<div class="morehover">
<?= nc_edit_inline('morehover', $f_RowID, $cc)?>
<div class="ssilka-podrob"><a class="ssilka-podrob-link" href="<?= $f_linkMore ?>">Подробнее </a><i class="fas fa-angle-right"></i></div>
</div><span><?= nc_edit_inline('Price', $f_RowID, $cc)?></span>
<a href="<?= $f_buttonLink ?>" class="button" target="_blank">
<?= $f_buttonText ?>
</a>
</div>
</div>
Where is my mistake?
look at this line:
hint = $(this).parent().find('.morehover');
You are on the element <div class="one"> and you are selecting the parent element of it than looking for morehover. You want the morehover inside of the element you are on, so you should NOT be looking at the parent.
hint = $(this).find('.morehover');
I got a a custom loop into my Wordpress custom blog page, and Im displaying all my posts into it, like that :
<section class="container blog-article-actu">
<div class="row">
<?php
$the_query = new WP_Query('showposts=-1');
while ($the_query->have_posts()) :
$the_query->the_post();
$catObj = get_the_category();
?>
<article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><?php echo $url ?>');">
<div class="blog-article-actu-article-top">
<h2><?php the_title(); ?></h2>
<div class="details-blog-article-actu">
<div class="blog-article-actu-date">
<span class="day"><?php the_time( 'd' ) ?></span><br>
<span class="month"><?php the_time( 'F' ) ?></span>
</div>
<a href="#" target="_blank"><p>
<?php
if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) {
echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">";
} elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) {
echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">";
} elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) {
echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">";
} else {
echo "";
}
?>
</p></a>
</div>
</div>
<div class="blog-article-actu-article-bottom-wrap">
<span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>
<span class="blog-article-actu-article-bottom">En savoir <span>+</span></span>
<div class="social-blog-article-actu">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</div>
</article>
<?php // End of the loop.
endwhile;
?>
</div>
</section>
Then I was asked to build something to sort them, by tags, dynamically, with a tag system like this one : https://codepen.io/Chaaampy/pen/gWOrvp
But Im a bit lost about that ... I thought about get the tags for each posts in my loop, and then add them as a CSS class, like that maybe I could show or hide some articles in JS ... Meh, I don't know, has someone got any ideas for me ?
Thanks ! :)
If anyone is interested, found a solution by building something like that : https://codepen.io/Chaaampy/pen/gWOrvp
$(function filter() {
var selectedClass = "";
$(".link").click(function(){
selectedClass = $(this).attr("data-rel");
$(".wrap").fadeTo(100, 0.1);
$(".wrap section").not("."+selectedClass).fadeOut().removeClass('scale_anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale_anm');
$(".wrap").fadeTo(300, 1);
}, 300);
});
});
Note that I get the tags into Wordpress with get_the_tags, and then I add them as a class to the elements I want to show / hide
I have successfully implemented slider on view page but in jquery response i dont understand y slider is not moving and i dont know where i am doing wrong. Actually i ve loaded data in jquery response which is coming from database.
Here is my successful view page for slider:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width:640px;">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="slider">
<?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?>
<div class="item <?php if($count==1){ echo 'active'; } ?>">
<img class="img-responsive" src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="...">
<div class="carousel-caption">
<?php echo $img->attachment_name.' ('.$img->column_name.')'; ?>
</div>
</div>
<?php $count++; }} ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
which successfully produces this:
and now i want to do the same thing in jquery reponse to set those data in slider:
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
but i get this only:
, slider is not moving. Any idea where in my jquery i am doing wrong?
After Ajax response, when you bind HTML in your slider div, you have to call $('.carousel').carousel();
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
$('.carousel').carousel();
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
I have 3 progress bar on webpage from database data . When user click on load more 3 more progress bar get added from database data.
<div id="progressBar<?php echo $rec['cid'];?>" class="tiny-green"><div></div></div>
<!-- Some codes are here --->
...
....
.....
<?php
$prj= mysql_query("select * from campaign where uid=$uid");
$record = array();
while($row = mysql_fetch_assoc($prj)){
$record[] = $row;
}
?>
<script type="text/javascript">
<?php foreach($record as $rec){?>
progressBar(<?php $perc= $rec['value']*100/$rec['value1']; echo $perc;?>, $('#progressBar<?php echo $rec['cid'];?>'));
<?php } ?>
</script>
Below is javascript plugin
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
Now problem is when i add progress bar from load_more button(Which get data by load_more.php file and it insert it on index.php file). i can see the value but progress bar is not creating because code given above not loading after clicking on load_more.
So, i want to know is there any way i can reload that code only. So, wherever there is a progress bar control placed it get the display the bar.
update with some modifications, hope it will help you
$prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = array('data' => '', 'progress_bar' => array());
while($row = mysql_fetch_assoc($prj)) {
$result['data'] .= '<div class="col-sm-1 col-md-4 unique" id="'.$rec['cid'].'">
<div class="well">
<div class="media services-wrap55 wow fadeInDown">
<img class="img-responsive" src="'.$rec['poster'].'"><br>
<h4 class="media-heading">'.$rec['project_Name'].'</h4>
<p> by <i>'.$rec['user_name'].'</i></p>
<p> '.$rec['short_dis'].'</p>
<a class="" href="view_project/'.$rec['cid'].'/'.$rec['slug'].'">More ... </a>
<p>
<div id="progressBar'.$rec['cid'].'" class="tiny-green"><div></div></div>
<h6>'.($rec['view']*100/$rec['view2']).'% ( <i class="fa fa-user"></i>'.$rec['view']. ') '.$rec['view2'].' views.</h6>
</p>
<div class="counter-inner"> <div id="example1" data-countdown="'.date("m/d/Y h:i:s", strtotime($rec['Closing_Date'])).'"></div></div><p> <!-- Work on this -->
<div class="col-sm-11">
<div class="entry-meta">
<span><font color="#339933"><i class="fa fa-comment"></i> </font> '.$rec['comment'].' Comments </a></span><!-- Work on this -->
<span><font color="#339933"><i class="fa fa-thumbs-up"></i></font> '.$rec['up_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-thumbs-down"></i></font> '.$rec['down_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-star"></i> </font> '.$rec['fav_count'].' Fav </a></span>
</div>
</div>
</div>
</div>
</div>';
$result['progress_bar'][] = array('cid' => $rec['cid'], 'perc' => $rec['value'] * 100 / $rec['value1']);
}
$(document).ready(function() {
$('#more').click(function() {
var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
$('#more').html('<img src="ajax-loader.gif"');
$.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
if(html.data) {
$('div').append(html.data);//$('.main-div') ?
$('#more').text('Load More Project'); //add text "Load More Post" to button again
for(i = 0; i < html.progress_bar.length; i++) {
progressBar(html.progress_bar[i]['perc'], $('#progressBar' + html.progress_bar[i]['cid']));
}
} else {
$('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
}
}, 'json');
});
});
Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066