There is a project I took over for restyling and they asked me to fix the anchors for tabs where the user gets send to the top in firefox: http://new.yourcoach.be/opleidingen/nlp-bootcamp/
It works like a charm in Chrome but not in other browsers
<script>function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;" onClick="changeTab(event)"><?php echo $tab['_title']; ?> </a>
I tried the following without succes:
Anchor
Anchor
Anchor
<script>
$( "tablink" ).click(function() {
e.preventDefault();
console.log("Changing tab");
})(jQuery);
</script>
<a id="tablink" href="#">Anchor</a>
Solution
Anchor
To have an html element fire a javascript event, you can either use the onClick attribute of the element and enter the javascript function directly in the attribute:
# html
Example
# javascript
function changeTab(e) {
e.preventDefault();
// do things
}
Or you can just do it in the javascript by hooking onto all elements that match a certain selector. This is the preferred method, as it doesn't mix the html and javascript, which makes it easier to understand what affects what.
# html
Example
# javascript
document.querySelectorAll('.js-change-tab').forEach( a => {
a.addEventListener('click', e => {
e.preventDefault();
// do things
});
});
Following worked for all browsers not to go to the top anymore:
Anchor
Use a JQuery callback to avoid event object issues
<script>
function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}
$(document).on("click", ".nav-link", changeTab);
</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;"><?php echo $tab['_title']; ?> </a>
Related
I made an read more read less script for my Magento 2 webshop. This is used on a category page where there are serval subcategorie blocks to choose, each subcategory has a description with.
The problem: if I click read more all the descriptions of the subcategories will expand in stead of only the description of the subcategory I clicked read moreI am starting to learn PHP and Magento 2 but I can't fix this, does someone know the solution?
<div class="product description product-item-description">
<div class="more">
<?php if ($_subCategory->getDescription()) {
$string = strip_tags($_subCategory->getDescription());
if (strlen($string) > 250) {
// truncate string
$stringCut = substr($string, 0, 250);
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... Lees meer';
}
echo $string;
?>
</div>
<?php
}else {?>
<?php /* #escapeNotVerified */ echo $_attributeValue;
}
?>
</div>
<div class="less" style="display:none">
<?php echo $_subCategory->getDescription(); ?>
Lees minder
</div>
<script type="text/javascript">
console.log('test');
require(["jquery"],function($){
$('.readmore').on("click",function(){
$('.less').show();
$('.more').hide();
});
$('.readless').on("click",function(){
$('.less').hide();
$('.more').show();
});
});
</script>
</div>
This is because, when you type $('.less').hide(); this is grabbing every element with the attribute class='less'. This is the way I would overcome this:
Start by attaching a unique attribute to each <div class="more"> or <div class="less"> - in this case, we use the class attribute: (and move 'more' or 'less' to an id)
<div id="read-more-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read more" content -->
<a class="link" href="#read-more-block">Read Less</a>
</div>
<div id="read-less-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read less" content -->
<a class="link" href="#read-less-block">Read More</a>
</div>
We now have a read-more-block and a read-less-block for each subcategory. When we click the inside link a jQuery event should fire which will hide itself and display the other.
And then, in your jQuery:
$('#read-more-block .link').on('click', function() {
var $readLessBlock = $('#read-less-block.' + $(this).parent().attr('class'));
$readLessBlock.show(); //Show the read less block
$(this).parent().hide(); //Hide the read more block
});
..and vice versa for read less.
I would like to pass four arguments event, $row['title'], $row['username'] and $row['date'].
<?php
echo "<script>
function increasevotes(e,location,user,date)
{
e.preventDefault();
console.log(\"Hi!\");
}
</script>";
//I've proper code here for fetching the mySQL query results into $rows and that part is working perfectly.
while($rows=mysqli_fetch_array($result))
{
if($rows['public']=="yes")
{echo "<span class=\"right\" id=\"nolikes\">{$rows['vote']}</span><img src=\"img/like.png\" class=\"right\" width=\"30\" height=\"30\"/>";
}
?>
What is actually being done, is the page is being refreshed instead.
When I click view source page, this is shown:
<span class="right" id="nolikes">0</span>
<a href="" onclick="increasevotes(event,"chennai","venkat","01/07/2017")"><img src="img/like.png" class="right" width="30" height="30"/>
</a>
Change double quotes of function parameter to single quotes
onclick="increasevotes(event,'chennai','venkat','01/07/2017')"
or use \ to escape the quotes.
I use php to generate a table that has multiple links and divs like the one below, each with a unique id. Clicking the link shows the div. Can this be recoded with jQuery? The full code is pretty ugly with all of the backslashes and onclicks.
<a href = '#!' class = 'link' id = 'link".$id."' onclick = 'document.getElementById(\"box".$id."\").style.display = \"block\";'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>
It's not JavaScript making it ugly (and jQuery being pretty); it's the lack of separation of concerns that makes it ugly. Isolate your JavaScript, and activate it by registering a listener, not directly as string of code on your HTML (something that is just Not Done any more by any serious JS user).
This is perfectly readable, despite being "just" JavaScript:
<a href='#!' class='link' id='link<?php echo $id; ?>'>click here</a>
<div class='box' id='box<?php echo $id; ?>'>content here</div>
<script>
var link = document.getElementById('link<?php echo $id; ?>');
var box = document.getElementById('box<?php echo $id; ?>');
link.addEventListener('click', function(evt) {
box.style.display = 'block';
});
</script>
On the other hand, here is your original code with jQuery:
<a href = '#!' class = 'link' id = 'link".$id."' onclick = '$(\"#box".$id."\").css(\"display\", \"block\");'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>
Still ugly.
This is one way, change the HTML structure to this:
<a href='#!' class='link' data-box='#box".$id."'>click here</a>
<div class='box' id='box".$id."'>content here</div>
Then, bind only one event listener (instead of one per id) to the .link class. Use this code in an external JS file:
$('.link').on('click', function (e) {
e.preventDefault();
var box = $(this).data('box');
$(box).show();
});
try this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a href = '#!' class = 'link' id = 'link<?php echo $id; ?>' >click here</a>
<div class = 'box' id = 'box<?php echo $id; ?>'>content here</div>
<script>
$( ".link" ).click(function() {
this.style.display = 'block';
//this.style.display = 'none';
});
</script>
I have the following html:
<a href="#">
<div id="post-<?php echo $i++; ?>"></div>
<div class="like-icon-container">
<span class="icon-thumbs-up"></span>
</div>
</a>
And a listener to pick out the ID of the link that was clicked:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
</script>
The script does NOT work in the above example where I'm trying to link the icon that is in the div (it's not an image, but a font icon rendered in css). But the script works if I add text in the first div like this:
<a href="#">
<div id="post-<?php echo $i++; ?>">asdfasdf</div>
<div class="like-icon-container">
<span class="icon-thumbs-up"></span>
</div>
</a>
How can I get this to work without adding text in the first div?
You should not put div inside an anchor element. I'd suggest you to do it like this:
<div id="post-<?php echo $i++; ?>" class="clickable like-icon-container"><span class="icon-thumbs-up"></span></div>
CSS (pointer cursor):
.clickable { cursor: pointer; }
And then the JS:
<script type="text/javascript">
$(document).ready(function() {
$(".clickable").click(function() {
alert($(this).attr('id'));
// alternatively:
alert(this.id);
});
});
</script>
you can try this
$(document).ready(function() {
$("a").click(function() {
var id = $(this).children(":first").attr("id");
alert(id);
});
});
see
JS Fiddle
Firstly try to put a b/w the div instead of text if this doesn`t work apply a class to the div(s) and get a function call at click of that class
<div id="post-<?php echo $i++; ?>" class="isclicked"></div>
<div class="like-icon-container">
<span class="icon-thumbs-up"></span>
</div>
$(document).ready(function() {
$(".isclicked").click(function() {
console.log($(this).attr('id'));
});
});
I found the answer how to open few pages in new tabs with a single click, but I don't know how to place urls from mysqli database using fetch.
mysqli statement is ...
$pick_site = $mysqli->prepare("SELECT url FROM sites where chosen = ? ORDER BY name ASC");
$pick_site->bind_param('s', $yesterday);
$pick_site->execute();
$pick_site->store_result();
$pick_site->bind_result($list_sites);
while ($pick_site->fetch_array()) {
$mysites = $list_sites;
}
here is working javascript code for opening tabs
<a id="test" href="#"> CLick </a>
<script type="text/javascript">
document.getElementById("test").onclick = function(){
window.open("http://www.google.com",'_blank');
window.open("http://www.p3php.in",'_blank');
}
</script>
Thank you very much,
Ivan.
Just echo links like that :
<a id="test" href="#"> CLick </a>
<script type="text/javascript">
document.getElementById("test").onclick = function(){
<?php while ($pick_site->fetch_array()) { ?>
window.open("<?= $link ?>",'_blank');
<?php } ?>
}
</script>