We Keep Coding

Replace div class to another class using php or Javascript

I want to replace the class in the div from
this
<div class="producttitle"></div>
to this
<div class="producttitle h3"></div>
The above class is under the main div it has around 5 other classes to it
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle"><div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
const div = document.querySelector('producttitle');
div.classList.replace('producttitle','producttitle h3');
console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first title
document.querySelector('producttitle').classList.replace('producttitle', 'producttitle h3')
console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first bundle
I tried both the aboves ones but it's not working, correct me what I'm doing wrong here.

The snippet below is a proof-of-concept, basically I added two buttons to test adding or removing the class. For the sake of simplicity I assumed that you want to apply this for a single element, hence the use of .querySelector.
function add(selector, cl) {
let element = document.querySelector(selector);
if (element.classList.contains(cl)) {
alert('Class was already added');
} else {
element.classList.add('h3');
}
}
function remove(selector, cl) {
let element = document.querySelector(selector);
if (!element.classList.contains(cl)) {
alert('Class was already removed');
} else {
element.classList.remove('h3');
}
}
.h3 {
background-color: green;
}
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<input type="button" onclick="add('.producttitle', 'h3')" value="Add h3">
<input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">
Let's see how we can support plural class additions/removals:
function add(selector, cl) {
let elements = document.querySelectorAll(selector);
for (let element of elements) {
if (!element.classList.contains(cl)) {
element.classList.add(cl);
}
}
}
function remove(selector, cl) {
let elements = document.querySelectorAll(selector);
for (let element of elements) {
if (element.classList.contains(cl)) {
element.classList.remove('h3');
}
}
}
.h3 {
background-color: green;
}
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The second title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<input type="button" onclick="add('.producttitle', 'h3')" value="Add h3">
<input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">
Here I'm not alerting when the addition/removal did not succeed because it does not make sense to alert partial failures in the context of this test.

So, I found the solution
<h3 class="producttitle">
<?php if ($merchant = TemplateHelper::getMerhantName($item)): ?>
<div class="cegg-mb10">
<small class="text-muted title-case"><?php echo \esc_html($merchant); ?></small>
</div>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, 'small'); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>
From basic paragraph to a wrapped heading h3

How to create dymaic object by appending one value at the end in Javascript?

I have a flexslider with one video. The code is like this:-
HTML:
if(count($bannerlist)>0)
{
$v = 0;
foreach($bannerlist as $key=>$row)
{
if($row['Banner']['media_type'] == 'i')
{
?>
<li>
<img src="<?php echo $this->webroot.$row['Banner']['image_name']; ?>" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<!--<h3>Assurance</h3>-->
<p><?php echo $row['Banner']['description'];?></p>
<!--<a class="linkView" href="#">View Details</a>-->
</div>
</div>
</div>
</div>
</li>
<?php
}
else if($row['Banner']['media_type'] == 'v')
{
$v++;?>
<li id="slide<?php echo $v;?>">
<video id="myVideo<?php echo $v;?>" class="classFlexVideo" autoplay loop>
<source src="<?php echo $this->webroot.$row['Banner']['image_name'];?>" type="video/mp4">
<!--<source src="<?php echo $this->webroot?>images/Balasore.webm" type="video/webm; codecs=vp8, vorbis">-->
</video>
<img src="<?php echo $this->webroot?>images/bg3.jpg" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<p><?php echo $row['Banner']['description'];?></p>
</div>
</div>
</div>
</div>
</li>
<?php
}
}
}
Javascript/Jquery:-
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationLoop: false,
directionNav: false,
video: true,
slideshow: false,
manualControls: ".flex-control-nav li",
itemMargin: 10,
start:function(){
/*myVideo1.play();*/
},
before: function(){
$('video').get(0).pause();
}
});
$('#vidPlay1').click(function(){ // click on first dots to play video
myVideo1.play();
});
I am fetching the images/video from the database and so there could be more than one video. In that case, the id of the video object could be like myVideo1, myVideo2, myVideo3,.... and so on. I need to write codes like myVideo1.play(), myVideo2.play(), etc.
In PHP, we can create dynamic variables like
$var = 'myHouse';
$$var then denotes $myHouse.
Is there something similar in javascript? Say for example,
var videoVar = eval('myVideo' + i);
videoVar.play();

The preferred way to access elements by their ID is to use document.getElementById, so this is what you can do:
var video = document.getElementById('myVideo' + i)
video.play()

Is it possible to remove size from the end a responsive image path?

I want to remove the -500x500 part from the image so that I can show the actual image.
Here's the complete HTML if anybody wants to take a look:
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>

A quick way(not beautiful) is to replace the src of the element
src is a attribute on the element, so you can get the value with $(obj).attr("src") or set the value with $(obj).attr("src","newValue")
Edit I created a function so you can do this multiple times with multiple objects
Either add a class to the img, you want to change or call it by an attribute.
Class: fixImage($('.removeRatio'), "-500x500") or
Attribute: fixImage($('[title="Imam Abdoulaye Ndaw"]'), "-500x500")
console.log("This was my SRC: " + $('.removeRatio').attr("src"))
function fixImage(obj, removestring)
{
obj.attr("src", obj.attr("src").replace(removestring, ""))
}
fixImage($('.removeRatio'), "-500x500")
console.log("This now IS my SRC: " + $('.removeRatio').attr("src"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img class="removeRatio" alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>

Open Google Maps InfoWindow on link click outside of map

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:

Dynamically load an image inside modal

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