I am not new to jQuery, however this should work and isnt:
html:
<a href='<?=$s['url'];?>' class='playbutton'><img src='http://i.domain.net/icons/play.png' width=20></a>
jquery $("a.playbutton").click():
$(this).find("img").attr("src","http://i.domain.net/icons/stop.png");
If I change the attr to addClass("jimbo") I get the class jimbo added to my image. So it is finding the img tag fine, but not changing the source. Can someone tell me why?
full jquery function is:
$("a.playbutton").click(function(e) {
var current = $("#jplayer").data().jPlayer.status.src
var playing = current.split("/");
var href = encodeURIComponent($(this).attr("href"));
if(playing[3] != href) {
$("#jplayer").jPlayer("setMedia", {mp3: "http://mp3.domain.net/" + href});
$("#jplayer").jPlayer("play");
$(this).find("img").attr("src","http://i.domain.net/icons/stop.png");
$("a.playbutton > img").each(function () {
$(this).attr("src","http://i.domain.net/icons/play.png");
});
} else {
$("#jplayer").jPlayer("stop");
$("#jplayer").jPlayer("clearMedia");
}
return false;
});
All works fine apart from $(this).find("img").attr.. line. Like i said, If i change attr to addClass, it adds the class fine. Meaning that it can find the correct <img> tag okay.
(URLs have been changed to domain.net)
use prop in place of attr
$(this).find("img").prop("src","url");
Maybe you've forgot to add the return false to the callback, check this out:
http://jsfiddle.net/YnT5L/1/
$("a.playbutton").click(function() {
$(this).find("img").attr("src","http://i.domain.net/icons/stop.png");
return false;
});
Related
My algorithm:
I get the DIV text from php/SQL ($.get( "read.php"...)
APPEND contenteditable div with loaded text by jQuery
check the div value, if there is errors in text I make div red (assign class, $(this).addClass("fill_red");)
on every change of text - check and assign/remove class if needed.
Problem is: with preloaded text - everything is working.
But when I append div using JS - check function don't works.
I searched the web, maybe on() method helps me.
But what event?
It should be something like onload, onchange..?
(yes, I could make div generated by php and solve the problem, but I dont want full refresh)
Thank you!
part of code:
//texts load
$(function() {
$.get( "read.php", function( data ) {
var ionka = data.split(' ');
ionka.forEach(function(item, i, arr) {
var app_text = "<div id=\"segm" + i + "\" contenteditable role=\"textbox\">" + item + "</div>";
$("#textarea").append(app_text);
});
});
//checks
var intRegex = new RegExp('^[0-9/\]{5}$');
$('#textarea div').each(function(i,elem) {
if(!intRegex.test($(this).text())) {
$(this).addClass("fill_red");
}else{
$(this).removeClass();
}
});
// edit on change. Blur because of contenteditable
var segm_array = [];
$('#textarea div').each(function(i,elem) {
$(this).blur(function() {
if (segm_array[i]!=$(this).text()){
segm_array[i] = $(this).text();
if(!intRegex.test(segm_array[i])) {
$(this).addClass("fill_red");
}else{
$(this).removeClass();
}
}
});
});
You dont show much code here, but my guess is that you are trying to add class before new data is loaded into dom
$.get( "read.php" ).done(function( data ) {
// addClass etc
});
I need to be able to replace a php file with another php file based on screen resolution. This is what I have so far:
<script type="text/javascript">
function adjustStyle(width) {
width = parseInt(width);
if (width = 1920) {
$('book.php').replaceWith('book2.php');
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
which obviously isn't working-- any ideas? Thank you in advance for any help received.
UPDATE
Is this at all close (to replace the book.php line)?
{ $("a[href*='book.php']").replaceWith('href', 'book2.php'); };
Second Update to reflect input gathered here
function adjustStyle(width) {
width = parseInt(width);
if (width == 1920) {
$('#bookinfo').replaceWith(['book2.php']);
$.ajax({
url: "book2.php",
}).success(function ( data ) {
$('#bookinfo').replaceWith(data);
});
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
}
}
I have not seen the use of replaceWith in the context you put it in. Interpreting that you want to exchange the content, you may want to do so my using the load() function of jQuery.
if(width == 1920){
$("#myDiv").load("book1.php");
} else {
$("#myDiv").load("book2.php");
}
Clicking on the button replaces the content of the div to book2.php.
The first problem is I don't think that you are using the correct selectors. If you have the following container:
<div id="bookContainer">Contents of book1.php</div>
The code to replace the contents of that container should be
$('#bookContainer').replaceWith([contents of book2.php]);
In order to get [contents of book2.php] you will need to pull it in by ajax using the following code I have also included the line above so that the data from book2.php will be placed into the container:
$.ajax({
url: "http://yoururl.com/book2.php",
}).success(function ( data ) {
$('#bookContainer').replaceWith(data);
});.
I haven't tested this so there might be an issue but this is the concept you need to accomplish this.
First off... using a conditional with a single = (equal sign) will cause the condition to always be true while setting the value of variable your checking to the value your checking against.
Your condition should look like the following...
if (width == 1920) { // do something }
Second, please refer to the jQuery documentation for how to replace the entire tag with a jquery object using replaceWith()... http://api.jquery.com/replaceWith/
I would use a shorthand POST with http://api.jquery.com/jQuery.post/ since you don't have the object loaded yet...
In short, my code would look like the following using $.post instead of $.ajax assuming I had a tag with the id of "book" that originally has the contents of book.php and I wanted to replace it with the contents of book2.php...
HTML
<div id="book">*Contents of book.php*</div>
jQuery
function onResize(width) {
if (parseInt(width) >= 1920) {
$.post('book2.php',function(html){
$('#book').html(html).width(width);
});
}
else {
$.post('book.php',function(html){
$('#book').html(html).width(width);
});
}
}
Hope this helps.
how to get all anchor tag of page and add one class to mailto (eg. mailto:example#example.com) and another to web link (eg. http://example.com) ?
output expected :
<a href="mailto:example#example.com" class="class1">
<a href="http://example.com" class="class2">
$('a[href^="mailto:"]').addClass('class1');
$('a:not([href^="mailto:"])').addClass('class2');
Example: http://jsfiddle.net/HackedByChinese/3t2MQ/2/
Update Use :not() instead of [href^="http"].
You can use this JQuery to get a collection of anchor elements:
var elements = $("a");
from there you can loop through each and check the href value:
elements.each(function(){
var a = $(this);
if(a.attr("href").indexOf("mailto:") == 0){
a.addClass("MailToClass");
}
else{
a.addClass("HttpClass");
}
});
$(document).ready(function() {
$.each($('a'), function(k, v) {
var href = $(v).attr('href');
if (href.indexOf('mailto') != -1)
$(v).addClass('class1');
else
$(v).addClass('class2');
});
});
try this:
$('a[href^="mailto').each(function(){
$(this).addClass('sth')
})
Use the jQuery .each() function to loop through all the anchor elements and check the href so you know which class to add.
Example
$('a').each(function(){
if($(this).attr('href') == 'mailto:example#example.com'){
$(this).addClass('class1');
}
else if($(this).attr('href') == 'http://example.com'){
$(this).addClass('class2');
}
});
$("a").each(function(){
if($(this).attr('href').indexOf('mailto:') == 0) {//mailto link
$(this).addClass('class1')
}
else {
$(this).addClass('class2')
}
});
You could use something like this
$('a[href^="mailto:"]').addClass('class1'); //This line adds a class to any href starting with mailto
$('a[href^="http"]').addClass('class2'); //This line adds a class to any link starting with http
to find tag in same document do like
$('a[href^="mailto:"]').addClass('class1');
$('a:not([href^="http:"])').addClass('class2');
to find in iframe do like
jQuery("a[href^='mailto:']",jQuery("#myiframe")[0].contentDocument).addClass('class1');
jQuery("a:not([href^='http:'])",jQuery("#myiframe")[0].contentDocument).addClass('class2');
I have a script that pops up a div element when a anchor tag is clicked
echo '<h2>' . $row['placename'] . '</h2>';
It's echoed from a PHP script, and is working fine in FF and IE(9).
But chrome won't run it, atleast on ver. 18.0.1025.168 m
The popup(divid); event fires when I click it, but it doesent complete the function calling inside the script the function is in.
var width_ratio = 0.4; // If width of the element is 80%, this should be 0.2 so that the element can be centered
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
alert(popUpDivVar);
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=0;
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2;
window_width = window_width * width_ratio;
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
alert(windowname); // THIS WORKS
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
The last function in that script is the one that is called first. I put an alert box in it to verify that it was fired. BUT, I put an alert box in the next function that it calls (blanket_size), and it did not fire, as I had the alert box on the first line in the function. It did not fire.
I simply have no clue why. The weird thing is that this stuff works in other browsers, but not chrome. Any ideas?
Thanks!
Edit: And I also verified that the parameter value passed into the popup() function (the 'windowname' param) is valid/has a value. It contains the ID of a DIV that is in the HTML document, and it's not dynamically created.
Edit 2: Ok, I got the script running when and ONLY when I add an alert box with the parameter value in it (windowname) to the popup(windowname) function. But if I remove that box, it stops working again.
Edit 3:
Got no errors on the debugger at all. But now I'm even more confused. After a great deal of tries, it seems like it's working with the alert box at random! Sometimes works, and sometimes not.
Final Edit
Changed logic to jQuery. Should have done this long ago!
// Open property
$(".property-open-link", ".yme-propertyitem").live('click', function() {
$("#yme-property-pop").css({'display': 'block', 'z-index': '9999' });
$("#blanket").css({'display': 'block', 'height', getBlanketHeight(), 'z-index': '1000' });
loadproperties('open', $(this).closest(".yme-propertyitem").attr("id"));
});
// Close property button
$("#yme-property-close").live('click', function() {
$("#yme-property-pop").css('display', 'none');
$("#blanket").css('display', 'none');
});
Couple of things to clear up first:
It really helps if you create a way for us to interact with your
code, especially as you've pasted PHP code here, instead of plain
HTML
Is there a reason why you're not using a library to handle your DOM
interactions? It will make your code more concise and take away some
possible failure points when it comes to cross-browser code.
Right,
I'm a little unsure why your code isn't working in Chrome. I set up a demo in jsfiddle and it seems to work fine.
You'll notice I'm not attaching the events in onclick attributes on the <a/> element, and neither should you. This could be where the problem lies.
Currently, the code in the jsfiddle alerts as expected and only fails when it fails to find a relevent DOM node in toggle.
Note:
addEventListener in the example is not cross-browser, which is another reason to use a DOM library.
I have a php class that generates a map image depending on my db data. It is periodically updated thru a serInterval loop.
I am trying to update it with no flickering but I just can't. I've tried different methods (preloader, imageswitcher) with no success.
//first load
function map() {
$("#map").html("<img src=map.php?randval="+Math.random()+">");
}
//update it from setInterval calls
function updatemap() {
$("#map").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "map.php?randval="+Math.random());
})
}
Is there any way to update the image with no flickering at all? I would prefer an inmediate swap insteado of a fade.
The problem I'm having is that after calling updatemap() the image just dissapears. ¿Maybe it is a problem with the attribute src I am parsing?
THanks for your help.
You may still get a very slight flicker.
function updatemap() {
var img = new Image();
img.onload = function(){
$("#map img").attr("src", img.src);
}
img.src = "map.php?randval="+Math.random();
}
You need to load the subsequent maps into a hidden element first. Then when they're loaded, swap them in.
<div id = "map"></div>
<img id = "load-map" src = "" alt = "" />
$(document).ready(function(){
$("#map").html("<img src=map.php?randval="+Math.random()+">");
setTimeout(loadImage,5000);
}
function loadImage()
{
$("#load-map")
.attr('src','map.php?randVal='+Math.random())
.load(function(){
$("#map img").src($("#load-map").src);
setTimeOut(loadImage,5000);
});
}