I am trying to move between pages, but when I try to go to the next page it does not work as expected. When I click it the first time the result is 01 instead of 1, and the second time it becomes 011 instead of 2. What am I doing wrong?
HTML:
<p id='page'>0</p>
<div id='pics'>
<a href='<?=URL;?>index.php?p=gallery&image=<?=$pic['album_pic_id'];?>'>
<img class='<?php if($pic['album_pic_id'] == $image)
{ echo "selected_pic"; } ?>' width='90px' height='60px'
src='<?=URL;?>images/albums/<?=$pic['album_pic_photo'];?>' />
</a>
<a onclick='getElementById("page").value = getElementById("page").value+1;'>
Pievienot
</a>
</div>
Javascript:
window.onload = function() {
var page = 0;
};
Use innerHTML and parse its content to an integer with parseInt:
<a onclick='getElementById("page").innerHTML = parseInt(getElementById("page").innerHTML) + 1;'>Pievienot</a>
value only works with form elements such as input.
Related
I'm trying to get an array to split so I can use the data as an anchor href tag. I can get the arrays to log in the console, but every menu-link href is linking to #News.
Here is my code:
$(document).ready(function(){
if($('.newsletter-accordion').find('.headline_title').length > 0) {
var all = $(".headline_title").map(function() {
return this.innerHTML;
});
console.log(all);
for(var i = 0; i < all.length; i++) {
$('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap('<li><a class="menu-link" href="#' + all[i] + '" ></a></li>');
console.log(all[i])
}
}
});
I'm appending the data to an id of newsletter nav to be used as a navigation throughout the page. I'm not sure if I'm calling it correctly with the + all[i]?
Any help would be appreciated.
Update:
my json console log.
{"0":"News","1":"Gallery Title","2":"tyest","length":3,"prevObject":{"0":{},"1":{},"2":{},"length":3,"prevObject":{"0":{"location":{"ancestorOrigins":{},"href":"https://croydon.vm/newsletters/4th-march-2022/#News","origin":"https://croydon.vm","protocol":"https:","host":"croydon.vm","hostname":"croydon.vm","port":"","pathname":"/newsletters/4th-march-2022/","search":"","hash":"#News"},"jQuery32100224421490645290161":{"events":{"webkitvisibilitychange":[{"type":"webkitvisibilitychange","origType":"webkitvisibilitychange","guid":11,"namespace":""}],"ready":[{"type":"ready","origType":"ready","guid":7,"namespace":"slick.slick-0"}],"click":[{"type":"click","origType":"click","guid":16,"selector":".accordion-btn","needsContext":false,"namespace":""}]},"focusout":1,"focusin":1},"jQuery360044517605261132511":{"events":{"ajaxSuccess":[{"type":"ajaxSuccess","origType":"ajaxSuccess","guid":1428,"namespace":""}],"touchstart":[{"type":"touchstart","origType":"touchstart","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}],"mousedown":[{"type":"mousedown","origType":"mousedown","guid":1434,"selector":".qm-resizer","needsContext":false,"namespace":""}]}}},"length":1}}}
im using flexible content also so this is one of the blocks of html
<section class="newsletter-accordion">
<?php
$headline = get_sub_field('section_headline');
?>
<h1 class="headline_title" id="<?php echo $headline; ?>"><?php echo $headline; ?></h1>
<h1 class="" id="<?php echo $headline; ?>"><?php echo $headline; ?></h1>
<div class="grid_container">
<div class="row single_content__wrapper justify-content-center ">
it's calling the h1 headline title, this headline title appears on other blocks also.
The first time your for loop runs, the .contents().unwrap()...etc code grabs all the items with the "headline_title" class and moves them into the nav, wrapping them in a link. But of course in each one the link you're creating to wrap around each element it's moved uses the the first item from all, which is "News".
Next time the loop iterates, there's nothing left for .contents() to grab anymore, so nothing happens.
Instead, since .wrap() gives us the option to use a callback function, whose this context variable represents the current element in the matched set, we can dispense with all and the loop entirely:
$('.headline_title').contents().unwrap().appendTo($('#newsletter-nav ul')).wrap(function() {
return '<li><a class="menu-link" href="#' + $(this).text() + '" ></a></li>';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="headline_title">News</h1>
<h1 class="headline_title">Gallery Title</h1>
<h1 class="headline_title">tyest</h1>
<div id="newsletter-nav">
<ul>
</ul>
</div>
Documentation: https://api.jquery.com/wrap/
I am trying to get the mesg_id when the user clicks on a button it shows a popup and inside it , it will show the mesg_id
but the issue that i am having not that i cant retrieve the mesg_id is that it takes the one on top not the one the user clicks on example :
<div class="msg-action">
<p id="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
This is the script that shows the pop up when the reply is clicked and it takes the mesg_id
/* modle-popup*/
jQuery(document).ready(function(){
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $('#mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
jQuery('.sitemodal .sitemodal-dialog').click(function($){
$.stopPropagation();
});
jQuery(".close-popup ,.sitemodal").click(function(){
jQuery("body").removeClass("sitemodal-open");
jQuery(".sitemodal").removeClass("in");
document.getElementById("showMesgID").innerHTML = "";
});
});
how can i get the mesg_id the one the user clicks on not the one on top
You can only use an ID in an element once per page.
<div id="myid">testing</div>
<div id="myid">testing 2</div>
The first element takes precedent because it was the first element with that ID. You need to assign each element their own unique ID.
You cannot use ID for multiple elements. ID is meant to be unique for every element. You need to use CLASS instead. and then use closest() and find() to get the value from the element in the same modal.
Html:
<div class="msg-action">
<p class="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
Javascript:
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $(this).closest('.msg-action').find('.mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code
PHP/HTML CODE
if ($array->num_rows > 0) {
while($row = $array->fetch_assoc()) {
<div>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
<a href="#" class="js-show-modal1">
Quick View
</a>
</div>
}
}
JS CODE
$('.js-show-modal1').on('click',function(e){
e.preventDefault();
$('.js-modal1').addClass('show-modal1');
});
CSS
.show-modal1 {
visibility: visible;
opacity: 1;
}
HTML
<div class="js-modal1">
<img src="images/someimage.jpg">
</div>
this is what i need , when i click here : Quick View
Here shows this :
<div class="js-modal1">
<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
</div>
Make a counter outside the loop that we will use for indexing and targeting the correct modal.
I stored the target modal in a data-property of the <a></a> tags in which I used data-target.
if ($array->num_rows > 0) {
// initialize counter
$index = 0;
while($row = $array->fetch_assoc()) {
// use the counter in the loop, modal-".$index."
echo "
<div>
<a href='#' class='js-show-modal' data-target='modal-".$index."'>
Quick View
</a>
<div id='modal-".$index."'>
<img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
</div>
</div>";
// increment
$index++;
}
}
Then use this script below. We added an onclick event handler to .js-show-modal which will be all the <a></a> tags. We will then get data-target property as the selector. I used toggle for switching between hide() and show().
$(document).on('click','.js-show-modal',function(e){
e.preventDefault();
var target = '#'+$(this).data('target');
$(target).toggle();
});
I was trying to add the id value of active element into a url. Then using a button to redirect to the url.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
Javascript
function myFunction(){
var x = document.activeElement.id;
location.href = "apps-online.html?page=" + x;
}
My expectations was: when I click the button, it will redirect to page
"apps-online.html?page=company"
However, the url of the new page is
"apps-online.html?page="
I was wondering why the value of x hasn't been added to the url.
Hi, everyone. For now I have understood why this problem happened. Because every time when I click the button, the button became the last active element.
So is there any way to achieve my goal?
Do check the value of x whether it is empty or not if it is empty the value of x will be passed as empty so there is no value in the url .try debugging the code or use console.log
function myFunction(){
var x = document.activeElement.id;
console.log(x);
location.href = "apps-online.html?page=" + x;
}
this gives the value of x in the console check this.
Your button does not have an id.
Give id="company" to button element.
<div class="icon" tabindex="0">
<img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>
When you click on the button, the active element is button itself. I am assuming you have several divs and you need to pass the id of the highlighted element. You need to send the id to the function in some way.
Take a look below. This can be one of the many possible solutions.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
<img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
JS
let tabID = null;
let icons = document.getElementsByClassName('icon');
for (icon of icons)
{
icon.onclick = function()
{
tabID = document.activeElement.id;
}
}
function myFunction()
{
window.open("apps-online.html?page=" + tabID);
}
I am trying to display a thumbnail image with every thumb class, but currently I am getting the output below where the images are looping inside the href instead. The order of div, href and img must not change. It looks something like this jsfiddle but this isn't fully working of course...
currently getting:
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
<img src="">
<img src="">
</div>
required output:
<div class ='thumb'>
<a href="#" rel="1">
<img src=>
</a>
</div>
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
</div>
my loop:
var thumbnails = [];
$.each(data.productVariantImages,function(key, val){
thumbnails.push(val.imagePath);
});
for(var thumb in thumbnails) {
$('.thumb').append($('<img>').attr({
"src":[thumbnails[thumb]]
}));
}
am i looping it wrongly?
edit:
The thumbnails are part of a dynamic gallery where basically every time a user choose a different option in a dropdown list, the sources for the thumbs are supposed to change accordingly.
current html:
<div class="thumbnail"><?php
foreach($skuDetails['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<div class="thumb">
<a href="#" rel="1">
<img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
</a>
</div> <?php }}?>
</div>
sample array of thumbnails:
["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]
sample output:
<div class="thumbnail">
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
</div>
You need to use .each function on .thumb. Something like:
$(document).ready(function(){
$('.thumb').each(function(){
$(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
});
});
your loop is focused on wrong element. You append img tag to the thumb class. So, the img tags inside the same element. You should create div has thumb class inside the loop, and append it to the thumbnail div. That must like
var div = $(".thumbnail");
$.each(imageArray, function(index, value){
var elem = "<div class='thumb'><a href='#' rel='1'></div>";
div.append($elem);
$('.thumb').append("<img />").attr("src", value);
});
It may be wrong but you should watch the thumbnail element. I cannot write the code to test. But I think the logic must be like this.
If you want that exact structure, I made a demo using plain JavaScript. Enter a number and the thumbClone() function will generate that many. You could probably adapt this function with your existing code easily. I'm in rush, it probably needs refactoring, sorry. :-\
DEMO
function thumbClone(qty) {
var main = document.getElementById('main');
var aFig = document.createElement('figure');
var aLnk = document.createElement('a');
var aImg = document.createElement('img');
aLnk.appendChild(aImg);
aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
aFig.appendChild(aLnk);
aLnk.setAttribute('rel', '1');
main.appendChild(aFig);
aFig.className = "thumb";
console.log('qty: ' + qty);
var thumb = document.querySelector('.thumb');
for (var i = 0; i < qty; i++) {
var clone = thumb.cloneNode(true);
thumb.parentNode.appendChild(clone);
}
}
You need to use each loop which will get each class rather than getting only one class below is syntax of each loop
$(selector).each(function(){
// do your stuff here
)};
in your case
$('.thumb a').each(function(){
// do your stuff here
$(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};
Looks like you need to create the entire div structure for each image.
Lets create the below structure dynamically using the max length of the image array and add the image src .
var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) {
thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
thumbDivEnd;
//Here you can append the thumbDiv to the parent element wherever you need to add it.
}