Develop Reference

Jquery adding class if another class has this class in loop

$(document).ready(function() {
if ($("#grid .media-box").hasClass("brand1")) {
$("#grid .media-box-content").addClass("brand01")
};
}
});
and in body looping div grid
<div id="grid">
<?php foreach($data as $items) { ?>
<div class="media-box video <?php echo $items->brand; ?> <?php echo $items->country; ?>">
<div class="media-box-image">
<div data-width="240" data-height="168" data-thumbnail="gallery/thumbnails/thumb-2.jpg"></div>
<div data-type="iframe" data-popup="https://www.youtube.com/watch?v=5guMumPFBag" title="Psico dell consecteture"></div>
<div class="thumbnail-overlay">
<i class="fa fa-video-camera mb-open-popup"></i>
<i class="fa fa-link"></i>
</div>
</div>
<div class="media-box-content">
<div class="media-box-title">Psico dell consecteture</div>
<div class="media-box-date">
<?php echo $items->country; ?></div>
<div class="media-box-text">Lorem ipsum dolor sitam psico.</div>
<div class="media-box-more"> Read more
</div>
</div>
</div>
<?php } ?>
</div>
CSS:
.media-box {
font-size: 13px;
}
.brand01 {
background: blue !important;
}
.media-box-content {
padding: 20px;
position: relative;
color: rgb(51, 51, 51);
line-height: 17px;
}
The above code is not working for me.
<?php echo $items->brand; ?> <?php echo $items->country; ?>" >
is fetching 2 classes to the dive from database.

$("#grid .media-box.brand1").find(".media-box-content").addClass("brand01")
Your code will add class brand01 to all .media-box-content if the condition is true.

There is no need to use if condition, you can use .toggleClass() with second arg as function which returns a boolean value as true/false:
$(document).ready(function() {
$("#grid .media-box-content").toggleClass("brand01", function(){
return $(this).closest(".media-box").hasClass("brand1");
});
});
I feel you need to target the each .media-box-content and find the parent .media-box has the class, if has true then add it if false remove it.

Use this, it will work
$(document).ready(function() {
$("#grid .media-box").each(function(index, element) {
if ($(this).hasClass("brand1")) {
$(this).children(".media-box-content").addClass("brand01")
}
});
});

How to make an element appear on right or left depending of the position of the element clicked?

I’m working on a project where i have a mosaic of images (4 images per row) and when user mouses over an image, it makes appear a sidebar with some content inside.
The thing is if the user hovers image 1 or 2, the side bar is on right, if he hovers image 3 or 4 the side bar is on left.
I’m trying with a click for now as i find it easiest to do.
But at a certain point, a bug appears and the side bar is not on right side.
Here is my code :
The html in the snippet is a copy of the source code but i use php and a foreach loop to build the sidebar and the mosaic of images.
Try the snippet below.
HTML & PHP
<!-- Side bar -->
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<img id="bt_close_sidebar_content" class="bt_close pull-right pointer" src="img/site/bt-close.png" />
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
?>
<div id="membre_<?php echo $equipe['alias']; ?>" class="contenu_sidebar">
<h2><?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?></h2>
<h3><?php echo nl2br(htmlspecialchars($equipe['fonction'], ENT_QUOTES, 'UTF-8')) ?></h3>
<p><?php echo $equipe['texte']; ?></p>
</div>
<?php
$i ++;
endforeach;
reset($allDatasEquipe);
?>
</div>
</div><!-- fin sidebar_content_right -->
<!-- Images -->
<div class="container container_agence">
<div class="row mosaique_equipe">
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
if ($i == 1 || $i == 2) {
$class = 'sidebar_left';
} else {
$class = 'sidebar_right';
}
?>
<div class="col-md-3 col-lg-3">
<div id="<?php echo $equipe['alias']; ?>" class="img_mosaique_equipe toggle-sidebar pointer <?php echo $class; ?>">
<img src="img/equipe/<?php echo nl2br(htmlspecialchars($equipe['image'], ENT_QUOTES, 'UTF-8')) ?>" alt="<?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?>"/>
</div>
</div>
<?php
$i ++;
if ($i > 4) {
$i = 1;
}
endforeach;
reset($allDatasEquipe);
?>
</div>
</div>
JS / jQuery
$sidebar_content = $('#sidebar_content');
$('.images').click(function() {
var id = $(this).attr('id');
console.log('id : ' + id);
var position_sidebar = $('.contenu_sidebar').hasClass('sidebar_left');
if ($sidebar_content.hasClass('visible')) {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"text-align": "left",
"right": "0"
});
$sidebar_content.animate({
"right": "-1000px"
}, "slow").removeClass('visible');
console.log('sidebar_left closed');
position_sidebar_content = 'right';
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"text-align": "right",
"right": "0"
});
$('#sidebar_content').css({
"left": "0"
});
$sidebar_content.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
position_sidebar_content = 'left';
console.log('sidebar_right closed');
}
} else {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"right": "-1000px"
});
position_sidebar_content = 'right';
$sidebar_content.animate({
"right": "0px"
}, "slow").addClass('visible');
console.log('sidebar_left open');
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"left": "-1000px"
});
position_sidebar_content = 'left';
$sidebar_content.animate({
"left": "0px"
}, "slow").addClass('visible');
console.log('sidebar_right open');
}
}
});
/* side bar content */
#sidebar_content {
width: 50%;
position: fixed;
border-right: 1px solid #4c565c;
/* right: -50%;*/
right: -1000px;
top: 0;
height: 100%;
overflow: auto;
background: black;
z-index: 1000;
background-color: #999;
text-align: left;
}
.contenu_sidebar {
display: none;
}
.sidebar_content_wrapper {
position: relative;
height: 100%;
overflow: auto;
padding: 115px 50px 50px 50px;
}
.images {
width: 30px;
height: 30px;
background-color: red;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="1" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="2" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="3" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="4" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="5" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="6" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="7" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="8" class="images sidebar_right"></div>
</div>
</div>
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<p id="bt_close_sidebar_content" class="bt_close pull-right pointer">bt close </p>
<div id="membre_1" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_2" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_3" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_4" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_5" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_6" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_7" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_8" class="contenu_sidebar">
<p>text</p>
</div>
</div>
</div>

I didn't try your code but I think the example below shows a way of doing what you need.
<html>
<head>
<style>
.my-image {
display: inline-block;
background-color: #0f0;
with: 96px;
height: 72px;
margin: 1px;
}
.my-popup {
position: absolute; display: inline-block; z-index: 1000; background-color: red; with: 48px; height: 48px;
}
</style>
</head>
<body>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<script src="jquery.js"></script>
<script>
(function ($) {
var toDisplay = $('<div class="my-popup">Hey whats up</div>')
.appendTo($('body'))
.hide(0);
var images = $('.my-image');
$.each(images, function (index, el) {
var displayPos = calculatePosition(el, index >= images.length / 2);
var $el = $(el);
$el.on('mouseover', function () {
toDisplay.show(0).offset(displayPos);
});
$el.on('mouseout', function () {
toDisplay.hide(0);
});
});
function calculatePosition (image, right) {
var $image = $(image);
var pos = $image.offset(); // image position relative to document
if (right) {
pos.left -= toDisplay.width();
} else {
pos.left += $image.width();
}
return pos;
}
})(window.jQuery);
</script>
</body>
</html>
The idea is to set the displaying element position to absolute and calculate the new coordinates on each hover event and set them using jquery.

how to convert multiple div into image (png/jpeg) using php and javascript?

How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.
Here is the code I tried for -
<?php
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
My Css code --
<style>
#font-face {
font-family:roboto;
src: url("/roboto/Roboto-Medium.ttf")
}
.mydivCls {
background-image: url("1.png");
width: 325px;
height: 207px;
}
.mydivCls p {
font-family: roboto;
padding-top: 100px;
text-align: center;
}
</style>
And here is my script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
I'm getting following error in my console --
TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);

Here is the solution I found --
<?php
/**
* This Script is used for converting a particular div to image
*/
?>
and my HTML code --
<?php
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
and changes in script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>

Code for image generation is correct, you have issue in your php part (all div have the same id). Need to increment $i variable:
<?php $i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++;
} ?>

How to focus marker maps in jquery tabs

I have a problem before ask in here, i already searching in google or cases in stackoverflow, but not solved this case :(
This is my screnshot
http://i.stack.imgur.com/oSIsS.png
sign red arrow this is place marker, why google maps not focus in place marker ?
and this mycode
this part code page.php
<div id="tab-5">
<?php
$map = "-6.3447213,106.8658161";
$title = "Creative School";
$image = "log.jpg";
$addres = "DKI JAKARTA";
?>
<iframe id="headerMap" width="480" HEIGHT="420"></iframe>
<script>
jQuery("iframe#headerMap").attr("src", "map.php?map=<?php echo $map;?>&title=<?php echo $title ?>&image=<?php echo $image ?>&addres=<?php echo $addres ?>");
</script>
</div>
this full code map.php
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
var TILE_SIZE = 256;
var lang = new google.maps.LatLng(<?php echo $_GET['map'];?>);
function createInfoWindowContent() {
return [
'<center><b><?php echo $_GET['title'];?></b></center>',
'<center><b><?php echo $_GET['addres'];?></b></center>',
'<center><img src="images/<?php echo $_GET['image'];?>"></center>'
].join('<br>');
}
function initialize() {
var mapOptions = {
zoom: 13,
center: lang
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.setPosition(lang);
coordInfoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
Help me thank's you

Calling PHP code with Ajax [duplicate]

This question already has answers here:
How to access a model method with javascript
(2 answers)
Closed 8 years ago.
Please have a loook at the following code
<?php
//echo $this->Html->css(array('bootstrap', 'mark', 'style'));
echo $this->Html->script(array('timer','swfobject','bootstrap.min.js'));
//$this->requestAction('/flip2/correctAnswer')
?>
<style>
#hideall {
display: none;
opacity: 0.7;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
vertical-align:middle;
text-align:center;
}
.removeCardflip{
transition: rotateY(0deg);
-webkit-transition: rotateY(0deg);
transition-duration: 0s;
}
/* SECTIONS */
.section {
clear: both;
padding: 0 10px 0 10px;
margin: 0px;
}
</style>
<div id="hideall">
<?php //echo $this->Html->image('progress.gif', array('alt' => 'Wait', 'style' => 'text-align:center; padding-top:200px;'));?>
</div>
<!--<div class="wrapper" style="border: 1px solid red; width: 100%;">-->
<div class="section group" style="margin-top: 50px;">
<div class="col span_3_of_3">
<h3 style="margin:0px; font-size:22px;">Play word game: </h3>
</div>
</div>
<div class="">
<div>
<div>
<span class="remainWords"><?php //echo count($words);?></span> oxxxxxxxxxxxxxxxf <?php //echo $totalWords;?>
</div>
<div>
<?php
echo $this->Html->image("comic_edit.png",
array(
"alt" => "Pareto List",
"id" => "paretoList",
'url' => "javascript:;"
)
);
?>
</div>
</div>
</div>
<div class="container"><div class="row">
<?php
foreach($worddeck as $worcard)
{
?>
<div class="xy col-lg-3 col-md-4 col-sm-6 img-rounded" id="card1" style="width:250px; height:200px; background-color:grey; heiht:170px; margin: 10px 10px;">
<div id="enside1" >
<h1 data-pos="<?php //echo ; ?>" ><?php echo $worcard['unique_wordsforcards']['en_word']; $enSpell = $worcard['unique_wordsforcards']['en_word']; ?></h1>
</div>
<div id="ptside1" style="display:none;">
<?php echo $phonemer[$enSpell]; ?>
<p><?php echo $worcard['unique_wordsforcards']['hint']; ?></p>
</div>
<div id="cntrol1">
<button type="button" id="acertei" class="a btn btn-success mr5 btn-lg">Acertei</button>
<button type="button" id="Errei" class="e btn btn-danger mr5 btn-lg">Errei</button>
</div>
</div>
<?php
}
?>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
});
</script>
This is the View of a CakePHP page. $this->requestAction('/flip2/correctAnswer') will call the correctAnswer() method in Controller.
Here If I call the $this->requestAction('/flip2/correctAnswer') on page load, this works fine. I need to call this when the Acertei button is clicked, so I added it to the Ajax as proposed by a fellow SO user. However, it didn't work, the function do not get called. Why is this?

I would recommend first giving your Acertei button a unique ID like "acertei" for example (it currently shares the ID of "2" with its sibling button). Then with jQuery you can do the following:
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
This adds a click event to the Acertei button that will start an AJAX request to the 'flip2/correctAnswer' URL.