Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span>
Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
CSS is not capable of doing such things. But JavaScript is! To change the href of an element first obtain the element:
var e = document.getElementById("elementid")
or
var e = document.getElementByClassName("elementclass")
Here are the basics on JavaScript selectors.
And then we can change the href property like so:
e.setAttribute("href", "http://google.com")
Good Luck!
You can open using JS/JQuery and CSS
Jquery has short simple code and is too fast too so I prefer that:-
Here is the Code :-
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
//Remember to add JQUERY on your page to make any jquery code work
<div id="example">Click Here</div>
JS
//UPDATED CODE:-
$(document).ready(function() {
$("#example").click(function () {
alert("K");
window.open('http://www.google.com/');
});
});
the Issue was that the function I gave you should be added under "$(document).ready(function(){"
Reg, "DIV or SPAN" u can use any tag, but give ID to that and whatever ID you are giving, mention the same in jQuery code too!
And Reg, JQUERY being called, please check on your page is there any other MAIN Jquery file being called? if there is already some other Jquery being called then this one is not required.
Please Check the updated Fiddle for your reference: http://jsfiddle.net/aasthatuteja/aPbje/
Let me know if this resolves you issue.
Enjoy!
Related
Javascript developer,
i have this script which i display html dynamically in my template :
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');
});
Now i want to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> to that wrapleft div but its not working to display the blog title and nor it add the url of site.
Hint: this is a <a expr:href='data:blog.homepageUrl'> html/expression tag in blogger template which create link for your site homepage. like http://example.com where as <data:blog.title/> is a tag which display your blog title like "Stack Overflow". it is easy to add in a template but i found it hard when adding it to that append script.
I tried like below but thats not working:
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"><a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a></div><div id="wrapright">Designed Templatezy</div></div></div>');
});
So please anyone help me to add this <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> after the wrapleft div in that append script. thanks.
Updates: i can add as general link in the script: like a href stackoverflow.com
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">stackoverflow</div><div id="wrapright">Designed Templatezy</div></div></div>');
});
and this work, but how to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in the script to work, it is simple to add in template and display title of site with title, but how to add in that script inside append after leftwrap. i add it but it comes as plain texts.
A possible solution:
You can add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in your template as:
<div id="blogHomepageUrlLink" style="display: none;">
<a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a>
</div>
So your template handler can process it.
Then with your jQuery:
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');
You should be able to add the link with:
$("#wrapleft").html($("#blogHomepageUrlLink").html());
Or combined:
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'+$("#wrapleft").html($("#blogHomepageUrlLink").html())+'</div><div id="wrapright">Designed Templatezy</div></div></div>');
Since you are using a template language, the template language might be processed before the output reaches the browser. If it is not, if it is somehow handled after it reaches the browser, then jQuery might be attempting to strip unwanted code from .html() and instead may not recognize the tags. You can also use .text() if you want something a little more cut-and-dry.
However, to answer your question in the purest form (via jQuery).
In your second example you wrapped everything in a div tag but this can be accomplished using .wrap() ... what you should do is use the selector to locate what segment of the page you want. Also, please note you wrote "wrapp-inner" not "wrap-inner" ...
Let's go back to your original issue. You want append a link to the bottom of a page. In the doc ready function:
$('body').append("somehtml"); // append to body
However, to maintain sanity, instead you should create a "target" div to populate. Example:
HTML (in body):
<div id="credits"></div>
In Document Ready:
$('#credits').append("somehtml");
See this jsfiddle which demonstrates both.
https://jsfiddle.net/83fbnwe4/
And this shows the distinction between .html() and .append, as well as a way to .html() to effectively append:
https://jsfiddle.net/83fbnwe4/2/
Update
To include the other answer with some additional approach, basically you could display it from the jump and hide it with CSS, or hide it with jQuery:
$('#mylink').hide();
If you want to make the href dynamic -- populate it later than the time the code is rendered by your template parser - or if including content based on an AJAX request or simply via javascript event in some way, you can change it after the fact using DOM parsing.
// Simple:
$("#mylinkid").attr('href', 'http://www.live.com/');
//Complicated:
$("a[href^='http://stackoverflow.com']").each(function() {
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
http://stackoverflow.com");
});
(borrowed from How to change the href for a hyperlink using jQuery #179713)
I have the following link, which I need to use in a Wordpress/OptimizePress based site.
Click Me
The problem is that the OptimizePress LiveEditor will strip out the javascript. So you are left with this:
<a>Click Me</a>
I'd like to attach the above javascript after the page has loaded. I have three such links (forms) on this page. Each will have the same javascript. I was thinking maybe provide unique IDs for each but I'm not sure what is the best way to do this. Any ideas?
You can get onClick attribute value on Dom ready & store it into any global var.
var clickAttr;
$(document).ready(function(){
clickAttr = $('form a').attr('onClick');
});
After that on Window load you can add attribute onClick
$(window).load(function(){
$('form a').attr('onClick',clickAttr);
});
I am not sure that your requirement is satisfy with this code or not, but you can try this.
Note: I am writing for A tag which is inside form without id or class, you can add a class or id to A tag.
Try after load:
var $a = $('Click Me')
$( "a:contains('Click Me')" ).replaceWith($a)
I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?
The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.
.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?
Have you noticed that every 10 questions on this site is about jQuery?
Anyway...
I'm using jQuery for the first time. I don't know if I loaded it correctly. When I run this code:
<script type="text/javascript">
function allDayClicked() {
if (jQuery) alert("loaded");
var allday = document.getElementById("allDayEvent");
var start = document.getElementById("<%=startTimeSelector.ClientID%>");
$('allDayEvent').hide();
}
</script>
The alert appears, saying "loaded", but nothing else happens; the html checkbox doesn't go invisible. I get no kind of error in my javascript output.
Is it possible I haven't successfully loaded jQuery? I added a reference to it in my visual studio project and generated this by dragging it to default.aspx:
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
Otherwise, what's going on?
jQuery takes a css selector, not an id. If you want an id use the css form of declaring an id.
$('#allDayEvent').hide();
jQuery is loaded fine, you're just using it incorrectly. You should be doing either:
$('#allDayEvent') // recommended, the '#' means ID
Or:
$(allday) // since you already grabbed it with getElementById
jQuery can take a lot of different objects with $(). The options are listed here.
You are missing the # in your ID selector.
Change $('allDayEvent').hide();
to
$('#allDayEvent').hide();
Assuming that your checkbox has an id "allDayEvent", you just need the hash (#) in this line:
$('#allDayEvent').hide();
Is it possible using jQuery to select one full link that is in others 'tags'?
I would like select each href link of each item (<li>)..
My idea is to use the method each and then extract the link, for use to navigate then.
This is the part of the code of the page: http://pastebin.com/3Vjib4UR
Where in full code of page, there more <li> items in the <ul> tag.
P.S: I would like use the script in an external plugin of firefox (Greasemonkey),and not direct in the page.
Thanks in advance.
Kind regards.
Or shorter:
var links = $('a').map(function(){ return this.href;}).get();
If you want to get only certain links, just adjust the selector, e.g.
$('ul li a')
You really should learn how selectors works in order to use jQuery efficiently.
Like this?
var arr = new Array();
$("a").each(function(){ arr.push($(this).attr("href"); });