i have some codes like this
<span id="$RsC" class="menu" title="Action menu" onclick="menu(\''.$RsC.'\')">click</span>
function menu(id){
var d = document.getElementById(id);
d.innerHTML ='<a href="somthing;iframe=true&width=400&height=170" rel="prettyPhoto[iframe]" >Doesnt work</a>';
}
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".pp_pic_holder").remove();
$(".pp_overlay").remove();
$(".ppt").remove();
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'h0mayun'});
});
</script>
the problem is that after clicking on "click" and writing html link prettyPhoto plugin doesn't load
any help will be appreciated.
EDIT-------------------
damn you conflict it was again jquery conflict but to got it work i change function to this:
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".pp_pic_holder").remove();
$(".pp_overlay").remove();
$(".ppt").remove();
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'h0mayun'});
});
</script>
function menu(id){
var d = document.getElementById(id);
d.innerHTML ='<a href="somthing;iframe=true&width=400&height=170" rel="prettyPhoto[iframe]" >Doesnt work</a>';
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".pp_pic_holder").remove();
$(".pp_overlay").remove();
$(".ppt").remove();
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'h0mayun'});
});
}
And it is not going to work this way. You initialize prettyPhoto for existing elements on the page after your page was loaded. When you insert a new element, prettyPhoto plugin knows nothing about it, because it already "attached" itself to the elements existed before. You have to initialize prettyPhoto after all changes on the page or attach it after changes to the updated elements. Like this
function menu(id){
var d = document.getElementById(id);
d.innerHTML ='<a href="somthing;iframe=true&width=400&height=170" rel="prettyPhoto[iframe]" >Doesnt work</a>';
$('a', d).prettyPhoto({theme:'h0mayun'});
}
ps: I've made a simple test with the example of prettyPhoto and it is working
function menu(id){
var d = document.getElementById(id);
d.innerHTML ='Test link';
$('a', d).prettyPhoto();
}
If you're doing this $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'h0mayun'}); before the onClick function.
You would have to do it again after you have written the html of the object so the plugin would initialize again.
Related
I learned that you can update a content inside div by using jQuery. I want to improve this code as the content is being change after it loads. I want it to be permanent regardless if it's loading or not.
Here's my code.
function changeContent () {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML= "HELLO";
}
window.onload = changeContent ;
This is my html code
<div class="signuplink" id="topbarlogin">Login</div>
Either call your function at the end of your body tag without window.load in script tag...
It will execute function() faster than the window.load
Stack Snippet
<body>
<div class="signuplink" id="topbarlogin">Login</div>
<script>
function changeContent() {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML = "HELLO";
}
changeContent();
</script>
</body>
...Or you can use DOMContentLoaded EventListener...it is equivalent to the $(document).ready() jQuery
function changeContent() {
var myelement = document.getElementById("topbarlogin");
myelement.innerHTML = "HELLO";
}
document.addEventListener("DOMContentLoaded", function(event) {
changeContent();
});
<div class="signuplink" id="topbarlogin">Login</div>
On DOM Ready use .html() to set HTML of div.
// This is you DOM Ready
$(function(){
// Set HTML using jQuery
$("#topbarlogin").html("HELLO");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="signuplink" id="topbarlogin">Login</div>
Please try this
$("#topbarlogin").html("Hello");
This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>
sorry but i am newbie!!!
i am new to jQuery and i have a problem with jQuery $(this)
i have create a really simple jquery function in jsfiddle and it work but it's not work on website
i have use jquery 1.10.1 in jsfiddle and my code too!
you can see code here :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
</script>
</head>
<body>
<div class="resumeActu" data-id="3">click me</div>
</body>
</html>
and this is my code in jsfiddle too: demo
i cant understand why my code work on jsfiddle but it's not work in my page
In your website you need to place your code in a document ready handler. This is not required in jsFiddle as it automatically does it for you.
<script type="text/javascript">
$(function() {
$(".resumeActu").on('click', function(){
var id = $(this).data('id');
alert("id is = "+id);
});
});
</script>
The reason your current code does not work is because it is trying to attach the click handler to the .resumeActu element before it exists in the DOM.
try this
$(document).ready(function () {
$(".resumeActu").on('click', function () {
var id = $(this).data('id');
alert("id is = " + id);
});
});
Load this function after document is ready
I am trying to make jquery trigger an event when an anchor link has the same URL as the current page. Eventually this will add a class to the anchor link and let me style it differently with CSS but for now I just want it to show an alert box. Code below doesn't seem to work:
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') = buildurl){
alert("Done");
}
});
</script>
Can anybody shine a light on why this isn't working? Or a best practice for similar using JQuery?
Link is: http://www.otahboy.com/shop/index.php?route=information/information&information_id=4
Cheers,
Jack
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
use equality operator ==
if($('a').attr('href') == buildurl){
alert("Done");
$('a').attr("color","Red");
}
You have an assignment in your if condition. You need to add one = to it.
<script type="text/javascript">
$(document).ready(function() {
var buildurl = window.location.href;
if($('a').attr('href') == buildurl){
alert("Done");
}
});
</script>
I've created links to transition yet when the function is supposed to be called using the onmousedown event I get an uncaught undefined function. Clearly my function is defined. I'm am still learning code so what is it I don't see or understand. Any tips will be greatly appreciated.
<html>
<head>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="javascript">
$(document).ready(function (){
var url = "phpajaxtut.php";
});
function swapContent(cv){
$("#myDiv").html("animated gif goes here").show();
.post(url, {contentVar:cv}, function(data){
$("#myDiv").html(data).show();
});
}
</script>
Click the text
Click the text
Click the text
</head>
<body >
<div id ="myDiv">My default content</div>
</body>
</html>
Why not just use $.click(); instead, since you're already using jQuery, and forgo the hyperlinks? You can easily style some spans to look like as if that's what you want. My example just updates some text, but in there you can place / call your function.
See here:
// html
<span>Click Me</span>
<br />
<span>Click Me</span>
// js
var n = 0;
$("span").click(function(){
$(this).text($(this).text() + " " + n++);
});
Do you need a $ before .post?
$.post(url, {contentVar:cv}, function(data){
$(document).ready(function (){
var url = "phpajaxtut.php";
});
The var url isn't global. It can only be used inside the function
var url; //global url
$(document).ready(function (){
url = "phpajaxtut.php"; // set global url
});