I want to open a tab when the user clicks on an image link on the following website:
http://m.theseolounge.co.uk/index.php/jadever-jad-jce-counting-scale.html
The code of the tabs is the following:
<ul class="tabs clearer">
<li id="tab-additional"><a href="#" class="current">Product
Specifications</a></li>
<li id="tab-description">Product Features</li>
<li id="tab-downloads">Downloads</li>
<li id="tab-feefo_reviews">Feefo Reviews</li>
</ul>
The ID of the tab is "tab-feefo_reviews". The user clicks on the Feefo logo under the product name.
and this is my code:
<a onclick="javascript:window.location.href='#tab-feefo_reviews'";><img
src="<?php echo $this->getLogoSrc(); ?>" /></a>
On clicking, it jumps to the tab section, but does not open the tab. Is there a way of achieving this with inline javascript?
Add jQuery('#tab-feefo_reviews a').click() to your onclick event (the page already uses jquery, this is the quickest inline code).
Also, the anchor should include a href="javascript:void(0);" or even better, the hash of the anchor. And the onclick event doesn't need the "javascript:" prefix.
So change the anchor to this:
<a href="#tab-feefo_reviews" onclick="jQuery('#tab-feefo_reviews a').click()" >
Haven't tried yet but I guess this should work using jquery.
<img src="<?php echo $this->getLogoSrc(); ?>" />
Script:
$(function(){
$('#openSesame').click(function (e) {
e.preventDefault();
$('.clearer').find('#tab-feefo_reviews a').addClass('current').siblings().removeClass('current');
});
});
to navigate within page (use href="#id") and activate accordion panel
<a href="#tab-feefo_reviews" onclick="javascript:jQuery('#tab-feefo_reviews>a').click();">
<img src="<?php echo $this->getLogoSrc(); ?>" />
</a>
I'm answering this without knowledge of future changes to the site.
EDIT: http://youmightnotneedjquery.com/
First, set all the tabs to an empty class name, and .
var tabs = document.querySelectorAll("ul.tabs a");
for (var i = 0; i < tabs.length; i++) {
tabs[i].className = "";
}
var panels = document.querySelectorAll("div.tabs-panels > div.panel");
for (var i = 0; i < panels.length; i++) {
panels[i].style.display = "none";
}
Then, set the current tab to #tab-feefo_reviews and display the right panel.
var tab = document.getElementById("tab-feefo_reviews");
tab.className = "current";
var panel = document.getElementById("acctab-feefo_reviews");
panel.style.display = "block";
Related
I want to create a list of button where once clicked, it will shows the respective div as below. And in the div, there is a few links that user can click, and once they clicked the link and go back, it will bring them back to the previous div instead of the first default div. Codes as below.
<div class="tab">
<a class="tablinks btn" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
I have Javascript codes that will change the display from none to block when user clicked on the Item.
document.getElementById("m0").style.display = "block";
document.getElementById("t"+i).addEventListener('click',divStyle.bind(this,"m"+i),false);
function divStyle(num) {
var i,tdiv,tablinks;
tdiv = document.getElementsByClassName("tdiv");
for (i=0;i<tdiv.length;i++) {
tdiv[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i=0;i<tablinks.length;i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(num).style.display = "block";
Event.className += "active";
}
//print tab for Item
function printTab(itemnum) {
for (var y = 0; y < itemnum; y++) {
tabbtn = document.createElement("a");
tabbtn.classList.add("tablinks", "btn", "btn-secondary");
tabbtn.setAttribute("href", "#m" + y);
tabbtn.setAttribute("id", "t" + y);
if (y == 0) {
tabbtn.classList.add("tablinks", "btn", "btn-secondary", "active");
}
tabtxt = document.createTextNode(""); //print Item text here
tabbtn.appendChild(tabtxt);
document.getElementById("tab").appendChild(tabbtn);
}
//print div for Link
function printLink(num) {
var docFrag = document.createDocumentFragment();
for (var i = 0; i < Object.keys(obj).length; i++) {
moddiv = document.createElement("div");
moddiv.setAttribute("id", "m" + num);
moddiv.setAttribute("class", "tdiv");
moddiv.style.display = "none";
for (var i = 0; i < Object.keys(obj).length; i++) {
/*do something here and put link of each item*/
}
moddiv.appendChild(docFrag);
document.getElementById("tlist").appendChild(moddiv);
}
The problem I have now is that when LinkC is clicked, and user then pressed Back button in the browser, browser goes back to the link of the previous specific div, for example, page.html#m2 but shows div m0. I guess this is because I already set document.getElementById("m0").style.display = "block"; by default so it will always go to div m0 but is there other way to make sure the browser will go back to the previous specific div chosen?
My google finding shows people suggesting history.back() but that means I need to create a Back button but I do not want that. I am sure this is not a complicated issue but I can't think anymore on how to solve this.
Any help is very appreciated. Thank you!
Update: I tried to use history.back() and created a button but this also is not working as it still display div m0. :(
Update #2: Tried this on Firefox and it is working though. Is there another way to make sure it can work for different browser?
Please try the bellow code :
<div class="tab">
<a class="tablinks btn active" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<br>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
<style>
a{color:#333;text-decoration: none;background: #eee;border: 1px solid #333;border-radius:5px;padding:3px;}
.active{color:blue;background: #ccc;}
</style>
<script type="text/javascript">
var tabSelect=(url)=>{
console.log(url);
let hs = url.split('#')[1]||'m0',ts = hs.split('m').join('t');
if(hs!=''){
let tabcs = document.getElementsByClassName('tdiv');
for(let tabc of tabcs){if(tabc.id){tabc.style.display='none';}}
let tabhs = document.getElementsByClassName('tablinks');
for(let tabh of tabhs){if(tabh.id){tabh.className="tablinks btn"}}
let c = document.getElementById(hs);
if(c){c.style.display = 'block';document.getElementById(ts).className="tablinks btn active"}
}
}
window.onhashchange=(i)=>{tabSelect(i.newURL);}
window.onload=()=>{tabSelect(location.href);}
</script>
Hope you will be fine with this code.
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 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.
}
I have a toggle link to show or hide a table. This is the code for the link. When this is shown there is no blank line between the link and the table underneath
<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
<p style='text-align:center'>Show Inactive EDB Appointments
</a>
When the link is clicked a table is shows and I change the link text
link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments";
After this code is executed a blank line appears between the link and the table underneath
Close off the paragraph tag within the HTML and the JavaScript.
<a id='togglelink' name='togglelink' href='javascript:ToggleTable();' title='Show Inactive EDB Appointments' >
<p style='text-align:center'>Show Inactive EDB Appointments</p>
</a>
link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";
You forgot to close the <p> tag.
link.innerHTML = "<p style='text-align: center'>Hide Inactive EDB Appointments</p>";
Instead of using href="javascript: [some code]", which does not work in all browsers, you should use an onclick attribute as below and demo'd in this fiddle
<a id='togglelink' name='togglelink' href='#' title='Show Inactive EDB Appointments' onclick="ToggleTable();">
<p style='text-align:center'>Show Inactive EDB Appointments
</p><!-- Added in closing tag -->
</a>
Notes:
I made sure to close the <p> tag, though this was not the problem.
I've provided an example ToggleTable() function that guesses at how you initialize var link. I'd recommend document.getElementById('togglelink') or $('#togglelink') if using jQuery.
An alternative to the onclick attribute, as commented in the fiddle, is an event listener. Example below, if using jQuery:
function ToggleTable() {
var link = document.getElementById("togglelink");
link.innerHTML = "<P style='TEXT-ALIGN: center'>Hide Inactive EDB Appointments</p>";
}
$(document).on("click tap","#togglelink",function() {
ToggleTable();
});
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.