I'm trying to make a simple script that adds rel="lightbox" to links with .jpg or .gif in the href. Can someone help me? I can't see the mistake. Thank you.
<script type="text/javascript">
$('a[href*=".jpg"]').each(function() {
$('a[href*=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
});
</script>
You're targeting links with href attributes that contain BOTH '.jpg' AND '.gif'. Try targeting links with href attributes that END WITH EITHER '.jpg' OR '.gif':
<script type="text/javascript">
$('a[href$=".jpg"], a[href$=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
</script>
Update
To run the script when the DOM is ready, attach the function to the domready event:
<script type="text/javascript">
$(document).ready(function() {
$('a[href$=".jpg"], a[href$=".gif"]').each(function() {
$(this).attr('rel','lightbox');
});
});
</script>
Related
I need to make all html links of my wordpress website dont end in "?amp=1".
For example the link:
Page 1
It should change to:
Page 1
I have added the following code to my functions.php file but unfortunately it doesn't work.
function remove_amptoamp_links(){
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('a').each(function(){
if(this.href.indexOf("?amp=1") != -1)
{
var href=this.href.split("?amp=1")[0];
this.href = href;
}
});
});
</script>';
<?php
}
add_action('wp_footer', 'remove_amptoamp_links');
Some help? Thanks!
I have finally discovered that AMP does not allow Javascript to be executed.
I have the following code in my header -
<script type="text/javascript">
if ($("#comments").hasClass("comments-list")) {
javascript:document.getElementById('g-aside').style.width='0px';
javascript:document.getElementById('g-aside').style.marginleft='100%';
javascript:document.getElementById('g-aside').style.visibility='hidden';
javascript:document.getElementById('g-main').style.width='100%';
}
</script>
It does not work for some reason... The following page is the one i am attempting to adjust.
http://luogocomune.net/LC/index.php/20-varie/4290-benvenuti-sul-nuovo-sito
First of all, include the jQuery library before this script block of yours.
Then, change your script block to:
<script type="text/javascript">
$(document).ready(function(){
if ($("#comments").hasClass("comments-list")) {
$('#g-aside').css('width','0px')
.css('margin-left','100%')
.css('visibility','hidden');
$('#g-main').css('width','100%');
}
});
</script>
Readup: http://api.jquery.com/css/
I'm new to JQuery and my problem is that I have a button in a modal such that when I click it, a JQuery script is run. Pieces of code so far:
<a id="submitMe" class="btn btn-default btn-primary">Submit</a>
$(document).ready(function (){
$("#submitMe").click(function(){
alert("Something to alert");
});
});
Thanks for all your help!
Firstly, make sure you've included jQuery properly. You should download jQuery and place it in you folder and import it at you html source or use below inline query src definition to access the library online.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Secondly, if your anchor has been added dynamically to the DOM, you need to use event delegation:
<script>
$(function() {
$(document).on('click','#submitMe',function() {
alert("Something to alert");
});
});
</script>
I want a tooltip to show when I rollover on particular links. It's not working. The commented out alert is working, so event is not the issue. This is my javascript code:
$(window).load( function() {
$("a").each(function() {
if(this.text==" View image") {
$(this).mouseover(function() {
// alert("blabla");
$(this).tooltip();
});
}
});
});
on my html file the includes are:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" language="javascript" src="mainscript.js"></script>
I'd appreciate some help.
UPDATE: removing mouseover doesn't help
Remove the mouseover function. The plugin doesn't require you to add a custom mouseover function. It's done from the plugin for you.
if(this.text==" View image") {
$(this).tooltip();
}
Hope this helps ^^
Change the main jQuery function to $(document).ready(function(){});
This will probably work now~
Try this:
$("a").each(function() {
if(this.innerHTML == " View image") {
$(this).tooltip();
}
}
Also, there's a space before the View in "View image". I'm not sure if that's intentional or not.
I used jQuery tipsy on my recent projects. Quite easy to understand and integrate.
i'm trying this code:
<script type="text/javascript">
$('#ooo').click( function() {
alert("jadner");
});
<script>
prueba
I expected it shows the alert when i click on "prueba", but it doesn't show anything..
Regards
Javi
You need to bind the event only after the DOM finishes loading. Wrap your code inside $(document).load() event like this:
<script type="text/javascript">
$(document).ready(function() {
$('#ooo').click(function() {
alert("jadner");
});
});
</script>
1 - Make sure jQuery has been included.
2 - Make sure your click handler is in a $(document).ready(function() {...}); block.
See:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
You have to either reverse the order of the tags, i.e. put the script after the link:
prueba
<script type="text/javascript">...</script>
or wrap the code in a $(document).ready() callback:
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
The problem: When your JS is executed, it tries to find the element with ID ooo which does not exist yet. Parsing is always from top to bottom. So the script gets executed before the link element is created.
Add return false; below the alert. and like Nanne says, make sure you've got jQuery loaded properly
should be </script> not <script>
use document.ready()
<script type="text/javascript">
$(document).ready(function(){
$('#ooo').click( function() {
alert("jadner");
});
});
</script>
prueba
Try the following code.
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script language="javascript">
$(function()
{
$('#ooo').click( function()
{
alert("jadner");
});
});
</script>
prueba