The company I am working for handed me over a messy website ran using templates, so some elements in the website are automatically generated and are active links.
My main problem is that there are some elements on the site are active links that aren't suppose to be links at all. I was wondering if there is a way to remove the link from an html element using JQuery and maybe CSS?
this will help me tremendously, thanks in advance. I need to remove all href's from class 'slider'.
Here is some of my jquery, can someone please show me how to add it?
<script type="text/javascript">
$(document).ready(function(){
$("#productsLink").hover(function(){
$("#productsMenu").slideDown();
});
$("#productsLink, #productsMenu").hover(function(){
$("#productsLink").css("color","red");
});
$(".spacer", this).hover(function(){
$("#productsLink").css('color', 'white');
$("#productsMenu").slideUp();
$("#aboutLink").css('color', 'white');
$("#aboutMenu").slideUp();
});
});
</script>
try unwrapping the sliders using .unwrap(), assuming all these links have the class slider and they are directly wrapped in an anchor tag.
$('.slider').unwrap()
If you want to remove links with the class name slider from the DOM:
$('a.slider').remove();
You can remove all href attributes from links with class slider with this code:
$('a.slider').removeAttr('href')
This will keep the content of the elements intact and just disables them as a link.
CSS is no help here, it could only be used to hide elements completely.
You can use the replaceWith method to turn specific a elements into span elements. Example:
$('a.something, a.someother').replaceWith(function(){
return $('<span/>').text($(this).text());
});
Related
So I want to add a class to all the images in the webpage except for a particular <div>. I have made this code that will add a class to all the images in the webpage:
$(function(){
$('img').addClass('posts');
});
I need a similar code that does the vice-versa.
You can use the jQuery .not() method:
$(function(){
$('img').not('.posts img').addClass('aden');
});
I'm not sure what you mean by "do the vice-versa". Are you saying you want to remove the posts class from those images, or add it just to the images within that div?
leave it as you have there, and then remove the class from the image with a specific ID:
$('#imageID').removeClass('posts');
or if you want all images within a specific DIV not to have that class:
$('#divID img').removeClass('posts');
Of course this depends if your code justifies doing it this way or not, this is the best "cheating" option if you have a lot of images and you want "to skip" a specific image or a bunch of them from the class assignment.
You can use a custom attribute for the images you want to update:
<img ... update="true">
('img[udpate="true"]').attr("src"," url...")
i have just entered my website and all of the contect doesnt seems to appear, in the source there is an inline css style display:none in the html tag and the body tag... is there a way to track what does give this css property to the body and html tag, so i could remove it.. I tried Firebug plugin for Mozilla Firefox, but i cant find anything... The website is running on Wordpress
here is the link http://p315468.for-test-only.ru/
elements hidden with JQuery in (index):
$('html, body').hide()
just remark this line.
You can also try this
$(document).ready(function(e) {
$('.classname').css('display','block');
});
or using Id
$(document).ready(function(e) {
$('#ElementId').css('display','block');
});
If you want to track down what JavaScript is causing that issue and you are using Wordpress, the first thing you can turn to is deactivate all the plugins and reactivate it one after another to see which plugin is causing that issue.
$('#Element').css('display','');
$('#Element').css('display','block');
give a class to it and in jquery do
$( window ).load(function() {
$(".classname").show();
});
The problem is you write inline css in your home page,
so you need to remove dispaly:none; from your html and body tag from your home page
and it's working perfect.
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 ?
reading a lot of posts and answers about accessing content of an iFrame,
I try and combine these to my particulair case.
Unfortunately I can't get it to work, so maybe I'm missing some mental ability to add the dots ;)
What I try to do is as follows:
The page loaded in my IFrame (same domain) contains a menu, where my active items have class="menuactive" data-rel="SomeName". My parent page contains a div with links (#portfolioslider) that have id's corresponding to the data-rel attributes of the links in the iFrame.
So where in the iframe the links are for instance Fashion, on the parent page my elements are <span id="Fashion">Fashion</span>, on which I want to add a class class="active" at the same time as my iFrame reloads and adds the class="menuactive" to a menu item.
This seems the most logical approach:
Javascript in pages loaded in iFrame:
$(function() {
$('div.menu a.menuactive').ready(function() {
$(window.self.top).contents().find('#portfolioslider a').each(function() {
$(this).removeClass('active');
$('#$(this).attr('data-rel')).addClass("active");
});
});
});
Bit this doesn't work at all,
I wished I could make a jsFiddle but I can't seem to find out how to construct an iFrame there.
Any thought would be greatly appreciated!, thanks guys
kind regards,
Jeroen
Yeh!
I fixed it, using:
$('div.menu a').click(function() {
$('a.active', window.parent.document).removeClass("active");
$('#' + $(this).attr('data-rel'), window.parent.document).addClass("active");
});
Cheers,
Jeroen
I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)
Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.
I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.