I'm working on ul with javascript/jquery and I'm facing a very strange issue. It was working fine before I worked with some tags and, after that, it is creating an issue: it is adding an additional class "ui-selectable" which is not used anywhere in the whole code and it is messing with the functionality of the code.
See the code below
<div class="row"><ul id="selectMe" class="selectMe1">
<li class="myList">Monday</li>
<li class="myList">Tuesday</li>
<li class="myList">Wednesday</li>
<li class="myList">Thursday</li>
<li class="myList">Friday</li>
<li class="myList">Saturday</li>
<li class="myList">Sunday</li>
The url of the project is here see at the end on business hours
here is the screen shot screenshot
Find jQuery UI method selectable() in your code and remove that method.
Alternatively you can remove particular class like below:
jQuery('ul#selectMe').removeClass('ui-selectable');
(EDIT)
I found script in your page source:
$(function(){
$("#selectMe").selectable();
});
Just remove that script if you are not using.
if You are using Jquery-UI or any other framework then this class is coming from that way But if you are thinking this is additional and should not be part of ul class then You can remove the class with Jquery:
$('ul#selectMe').removeClass('ui-selectable');
Related
I want to execute a js code at the head of the page and have this code be watching for any elements that might be loaded from the html, as soon as they are available, instead of waiting for the page to complete loading. Is that possible?
My case:
I want to hide some elements from a page dynamically. So far, I ve been doing this at the $(window).ready(...) function, but the side effect is that the elements are shown for a second before this function kicks in. I would like to catch these elements as soon as they are loaded and ready to be shown and not have to wait til the whole page gets loaded.
Thanks!
You can hide elements "by default" with CSS class and then, when page is ready, remove class on elements you want to show.
Very simple example:
HTML:
<ul>
<li class="hidden to-be-shown">Element A</li>
<li class="hidden">Element B</li>
<li class="hidden to-be-shown">Element C</li>
<li class="hidden to-be-shown">Element D</li>
<li class="hidden">Element E</li>
</ul>
CSS:
.hidden {
display: none;
}
JS:
$(function () {
$('.to-be-shown').removeClass('hidden');
});
Here is the demo.
Hope this helps :)
to avoid the effect you are describing you could just reverse your logic and initially hide all elements with css you then show
Try looking into $(document).load() which fires when the page is loaded as opposed to $(document).ready() which fires when the page is rendered
Well simple method is to do it with CSS(display:none)
But i you want to use jquery you can try
$(window).load(function() {
//Code
});
Hope this helps
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
Using ASP.NET + BootStrap 3 and trying to create tabs. Everything works fine except that I want that fine border to appear around the currently active tab. For this purpose I need to apply active class on that li (and remove active from other li elements). I'm trying to achieve that through the following simple JS function. But when I click a tab header, it tells me that the function activateTab() is not defined. Any clues?
<EditItemTemplate>
<script type="text/javascript">
function activateTab(tab) {
$("#ItemTabs ul li").removeClass("active");
$(tab).addClass("active");
}
</script>
<div id="ItemTabs">
<ul class="nav nav-tabs">
<li>Details</li>
<li>Additional Info</li>
...
</ul>
</div>
</EditItemTemplate>
N.B: I'm not a seasoned web developer and may be reinventing the wheel here. Plz let me know if there is an easier way.
when javascript file is having some compile error , that time it gives these kind of problem.
You can try with this :
from $("#ItemTabs ul li").removeClass("active") TO this
$('div#ItemTabs > ul li').removeClass('active')
I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.
$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/
You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/
I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.
I think the java is somewhat self explanatory...
When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.
On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.
<script type="text/javascript">
$(document).ready(function(){
$(".testimonial:first").show();
$("li.testID:first").addClass("selectedName");
$("li.testID").click(function(){
$("li.testID").removeClass("selectedName");
$(this).addClass("selectedName");
$(".testimonial").hide();
$(this).next(".testimonial").fadeIn("slow");
});
});
</script>
Example of markup
<ul id="testName">
<li class="testID">Persons Name</li>
<blockquote class="testimonial">
<span class="bqStart">“</span>
Testimoinal here
<span class="bqEnd">”</span><br /><br />
<span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
</blockquote>
As a side note this is working fine in FF and Safari
Your help is greatly appreciated.
Thanks.
It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?
Is .testimonial the class you have given to your lists? <ul> or <ol>
It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.
Please try this instead:
$(this).parent().next(".testimonial").fadeIn("slow");