I have this issue which I'm sure I have solved before but cant for the life of me figure it out again. What I want to happen is one someone clicks a blend tile it clones that tile's featured image into the mixes area which it does but it kindly takes every other image with it. I only want it to grab the clicked elements img nothing more.
My loop does add numeric values to the blend tiles num-<?php echo $i++; ?>
So even a working solution where it grabs that unique class could work for the clone.
Update
In order for it not to continually add the image to the repeated .color-img it will have to grab the class and inject it into <li> then also some how add it into the appendTo so that when the item is clicked it only ever add's it to the newly created box.
$(function() {
$(".blend-tile").click(function() {
$("#mixer ul.mixers").append('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>'), slideumus();
$(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- wordpress Loop -->
<li class="blend-tile align num-<?php echo $i++; ?>">
<div class="tpic">
<?php the_post_thumbnail( 'thumb-blend' ); ?>
</div>
<section class="infora">
<h2>
<?php the_title(); ?>
</h2>
<p class="price">
<span class="amount">
£
<?php
$available_variations = $product->get_available_variations();
$variation_id = $available_variations[0]['variation_id'];
$variable_product1 = new WC_Product_Variation( $variation_id );
$regular_price = $variable_product1 ->regular_price;
echo $regular_price;?>
</span>
</p>
</section>
</li>
<!-- end of wordpress Loop -->
<div id="mixer" class="t-align">
<ul class="mixers"></ul>
</div>
You can try this:
$(".tpic", this).clone(true, true).contents().appendTo('.color-img');
Because if you do
$(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');
It will clone .tpic into your web page.
Well you are not selecting the one that was clicked, you have a selector inside that is selecting all the elements. You can get the one that was clicked by using this and you can get the elements inside with find.
$(".blend-tile .tpic").clone...
needs to be
$(this).find(".tpic").clone...
and if you have multiple .color-img' your code is also going to fail as it will append to every one of those elements. If you want to only to append to the one that was created, than you are going to have to keep a reference to the one that was just added.
var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>');
$("#mixer ul.mixers").append(li);
slideumus(); //no clue hy this was there with a comma
$(this).find(".tpic").clone(true, true).contents().appendTo(li.find('.color-img'));
Related
Am using a while loop to out various elements each containing rows from a mysql database. I was able to make each div have different id however, i have no idea how i can target each of the divs usings jquery through the ids so that each div is a clickable link.
Here is a part of my code
<!-- php script -->
<?php
require_once 'controllers/fetchVids.php';
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$fileName = $row[$filePath];
$file = basename($fileName);
$mb = round($row[$size] / (1000000), 2);
echo "
<div class='container search-output' id=''>
<div class='row song-info' id='file-$row[$videoId]'>
<div class= 'col col-sm-6 artist'>
$file
</div>
<div class= 'col col-sm-3 song-title'>
<span>Size:</span>
$mb mb
</div>
<div class= 'col col-sm-3 song-title'>
<span>Downloads:</span>
$row[$downloads]
</div>
</div>
<div class='row-lower'>
<a href='#' class='icon all-links'>
<i class='fa fa-whatsapp'></i> Share
</a>
<i class='fa fa-clock duration'></i> Duration $row[$duration] mins
</div>
</div>
";
} else {
echo "No New Videos";
}
mysqli_close($connection);
?>
Someone please show me the right jquery to do the above. thank you
Below is the jquery code i tried but it rather opens all the divs and not only that that a user clicks on
$(document).on('click', '.song-info', function() {
// alert(this.id);
if (this.id) {
window.location = "./song-details.php";
}
});
I think you were going wrong by using the 'this' keyword - you may have wanted to use $(this) instead, which is a keyword in jQuery that gives the DOM node you are currently working on access to jQuery methods (at least as far as I understand it!)
You can use $(this).attr('attribute name') (another jQuery method) to get the 'id' property of the div you clicked and use it within your function.
There are more than a few ways to do this, as mentioned in the comments, but here is how I would go about it. I'm assuming you want to send the fileId in a query string to './song-details.php'.
$(document).on('click', '.song-info', function() {
let id = $(this).attr('id').split('-').pop()
if (id) {
window.location = "./song-details.php" + "?id=" + id
}
})
I use a php while loop to generate some items with a litle description.
Each item has the same class and are preceded by an image of it.
The objective is to open a dialog that contains the description of the item when I click on the corresponding image.
This is what I've done:
Generate all items with all pictures:
while($result = $req->fetch()) {?>
<img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>" alt="<?=$result['object']?>" title="<?=$result['object']?>" class="obj">
<p class="descr_obj">
Name : <?=$result['objet']?><br><br>
Rarity : <?=str_replace(".png", "", $result['rarity'])?><br><br>
Description :<br>
<?=$result['description']?>
</p>
<?php }?>
Generate JQuery dialog:
$(".descr_obj").dialog({
autoOpen: false
})
$(".obj").click(function(){
text = $(this).next(".descr_obj").text();
$(text).dialog("open");
});
But nothing is appearing and the console doesn't show any error...
Can you please, help me?
Thank you in advance.
Couple of issues. The main one is that you never actually tell the dialog to open (by using .dialog("open"). The second one is you're going to end up with a ton of dialogs - one for each img because you're repeating the paragraph. Each instance of the descr_obj class will get it's own.
Try something like this (my php sucks, so it's probably wrong):
while($result = $req->fetch()) {?>
<img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>"
alt="<?=$result['object']?>"
title="<?=$result['object']?>"
class="obj"
data-name="<?=$result['objet']?>"
data-rarity="<?=str_replace(".png", "", $result['rarity'])?>"
data-desc="<?=$result['description']?>">
<?php }?>
<p class="descr_obj">
Name : <span class="name"></span><br><br>
Rarity : <span class="rarity"></span><br><br>
Description :<br>
<span class="desc"></span>
</p>
But here is what it the JavaScript would end up looking like:
$(function() {
let dialog = $(".descr_obj").dialog({
autoOpen: false
});
$(".obj").click(function() {
for(let prop of Object.keys(this.dataset)) {
dialog.find(`span.${prop}`).html(this.dataset[prop]);
}
dialog.dialog("open")
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img src="https://i.stack.imgur.com/4fDk5.png" data-name="one" data-rarity="Super Rare" data-desc="Amazing" class="obj">
<img src="https://i.stack.imgur.com/xBUJX.png" data-name="two" data-rarity="Common" data-desc="Meh" class="obj">
<p class="descr_obj">
Name : <span class="name"></span><br><br>
Rarity : <span class="rarity"></span><br><br>
Description :<br>
<span class="desc"></span>
</p>
I'm working on a WP code, but my problem in specific to JS. So I post my question here at StackOverflow.
Final goal is, clicking on the post image, showing the HTML markup of large img on Console. Here's my code:
<div class="img lightbox-trigger">
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
<?php $large_thumb = get_the_post_thumbnail($post->ID, 'large') ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
var largeThumb = <?php echo json_encode( $large_thumb ); ?>;
console.log( largeThumb );
});
});
</script>
The problem is when I click on one of the post's images, the largeThumb value of all other posts (there are 10 posts) printed on Console!
I don't know how to use $(this) in this specific context to just get the value related to the element being clicked on.
Any help is appreciated.
You could use data-* attributes to store the $large_thumb of every lightbox-trigger in the related div :
<div class="img lightbox-trigger" data-large-thumb='<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>'>
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
Then in the js you could get this info :
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
console.log( $(this).data('large-thumb') );
console.log( $(this).html() );
});
});
Hope this helps.
I am using a php script to extract values from the database as follows,
<div class="col-md-4" >
<?php
$qry = "SELECT * FROM upperbit_categories";
$rslt = mysqli_query($dbc,$qry);
while ($output = mysqli_fetch_array($rslt)) {
?>
<li class="nav" id="test" style= "text-decoration: none;">
<a href="postad" >
<?php echo $output['Classify'].'<br/>'; } ?>
</a>
</li>
</div>
<div class="col-md-4" id="testing">
</div>
this code gives me below result:
General equipment
Test equipment
Renewable energy
Engineering Services
Trade services
Below is the jQuery bit:
<script>
$(document).ready(function(){
$("#test").click(function(){
var classprod = $(this).text();
$("#testing").text(classprod);
event.preventDefault();
})
});
</script>
However this only outputs line-1 but nothing else i.e. General equipment.
What changes do I have to make to my javascript code in order to be able to display any item clicked?
Little errors, but easy to solve. Your php loop leave a lot of tags opened, an closes just one, then you should use a Class instead on an Id for multiple elements.
Another tip is that you should open and close the ul tag before your list.
HTML
<div class="col-md-4" >
<ul>
<?php
$qry = "SELECT * FROM upperbit_categories";
$rslt = mysqli_query($dbc,$qry);
while($output = mysqli_fetch_array($rslt)){?>
<li class="nav test" style= "text-decoration: none;"><a href="postad" ><?php echo $output['Classify'];?></a></li>
<?php };?>
</ul>
</div>
<div class="col-md-4" id="testing"></div>
JS
<script>
$(document).ready(function(){
$(".test").on('click',function(event){
event.preventDefault();
var classprod = $(this).text();
$("#testing").text(classprod);
})
});
</script>
Also, I don't know what you're doing, but consider to use $(".test a") instead of $(".test")
In General, id of HTML elements should be unique, this requirements can be realized when using jQuery or JavaScript. In your code, you used id="test" for the li element inside a loop, and then you referenced to them using $("#test") then, only first li works due to uniqueness of id.
you can use class instead of id.
I have a tab. where data comes with dynamically. now i set a condition with jquery.
if we have more then 6 this controll will display normally. if we set equal 6 or bellow.
this control will hide.
as this tab only show 6 and if i add more then 6 this control will appear in front. otherwise this will hide.
<div id="info-nav-container">
<ul class="info-nav">
<?php $counter=1 ; foreach ( $atts[ 'info_models'] as $tab ) : ?> //loop will be here
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="info-nav-control ">
<a class="info-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="info-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a> </div>
</div>
Here is the jQuery Which i tried to hide
if ($('.vehicle-nav li').find('li').length <= 6) {
find('.vehicle-nav-control').hide();
}
Your JS code is throwing errors in console.
find('.vehicle-nav-control') must be appended to jQuery object.
=> operator must be replaced with >= (source).
JS code must be in dom ready function.
You never open <li> tag.
Selector $('.vehicle-nav li').find('li') will not find any items.
$(document).ready(function(){
var lists = $('.vehicle-nav li');
if (lists.length <= 6) {
$('.vehicle-nav-control').hide();
}
});