I applied jQuery tabs to my webpage, but its functionality depends on one existing css class which is used in an JavaScript file. If I remove that class then tab won't work if I keep that css then jQuery css gets overridden. I am confused a lot please help. The class name is "Tabs" you can find in mark up. I have attached both css class and JavaScript that is using that class.
The JavaScript file is as below. Stackoverflow is not allowing me to add JavaScript file and css any body send me your mail id I will send the code please.
<div id="Tabs1" class="Tabs">
<ul>
<li>
<a id="Course" href="#COURSE" onclick="handleTab('1')">Course (<asp:Label ID="lblcourse" runat="server" Visible="true"></asp:Label>)</a>
</li>
<li>
<a id="General" href="#GENERAL" onclick="handleTab('2')">General (<asp:Label ID="lblgeneral" runat="server" Visible="true"></asp:Label>)</a>
</li>
<li>
<a id="Group" href="#GROUP" onclick="handleTab('3')">Group (<asp:Label ID="lblGroup" runat="server" Visible="true"></asp:Label>)</a>
</li>
</ul>
</div>
Related
I have an unstructured list(ul) inside div tags and I am trying to get the title of an anchor tag, which is inside an li that has class="selected".
<div class="mainmenu">
<div class="mainmenulinks">
<ul>
<li class="selected">
<a class="topmenu-navigation-links" id="topMenuItem0" href="" title="Private">
<span class="span-link-Private">Private</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem1" href="" title="Business">
<span class="span-link-Business">Business</span>
</a>
</li>
<li>
<a class="topmenu-navigation-links" id="topMenuItem2" href="" title="Broker">
<span class="span-link-Broker">Broker</span>
</a>
</li>
</ul>
</div>
</div>
In this case, I should be getting Private as its li has class="selected".
[Updated] Working Fiddle https://jsfiddle.net/prashantkumar_999/rd9zttyn/9/
You can use:
$("li.selected>a").attr("title")
If you need to be more specific, you can add before the li, eg:
$(".mainmenu .mainmenulinks li.selected a").attr("title")
Your fiddle doesn't work as you've
not included jquery
not included "." for some classes (but have for others)
with hasClass, it needs to be in quotes without ".", eg .hasClass("selected")
tried to use this outside of a relevant context
Prop vs Attr
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
while prop does work and is an easy fall-back incase you're not sure which to use, it should be attr for title.
Try this
$('li.selected').find('a').attr('title');
Updated Fiddle https://jsfiddle.net/rd9zttyn/3/ which is working fine
Im a newbie and im trying to create a webstie just for practice, I realized that when I want to line break one of the divs (just to make stuf fancy) all my other divs gets linebreaked though, which I dont want. how do you fix this?
<ul class = "nav">
<div class = "head_dividers"><li> Hello <span> World </span> </li> </div>
<div class = "head_dividers"><li> stuff </li></div>
<div class = "head_dividers"><li> Help </li> </div>
</ul>
</div>
You should not have the <li> tags inside of a <div> tag. You can swap them if you like, but generally, <div> is a divider, and the <ul>/<li> items setup their own spacing/breaks (on each new list item).
The <br /> tag, on the other hand, is used inside of your text to create a break at a specific point.
I would recommend something a bit more simple like this:
<ul class="nav">
<li class="head_divider">...</li>
<li class="head_divider">Text<br />Here</li>
<li class="head_divider">...</li>
</ul>
and use CSS to add any necessary styles/spacing.
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
I edited a template that I found online and had a jquery for thumbnails..
<ul class="ff-items">
<li class="ff-item-type-1">
<a href="#" title="" >
<div><span>Title 1 ABC</span></div>
<img src="images/w_abc1.jpg" alt=""/>
</a>
</li>
<li class="ff-item-type-3">
<a href="#" target="_blank" >
<div><span>TITLE 2 ABC</span></div>
<img src="images/w_abc1.jpg" alt="" />
</a>
</li>
</ul>
Link to this jquery plugin: [ ::Link:: ]
This plugin groups a list of images and on hover displays an animation with spanned text for info. Basically a transition on hover.
Now, I'm trying to change the hover effect to another effect via another jquery plugin which uses the following syntax:
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
Link to this Jquery/CSS3 plugin: [ :::link::: ]
Now, my problem is that I want to keep the radio button selection but don't want the transition effects on hover.. instead I want the second jquery listed above which displays the info in a direction-aware way.
Class for ul is already described as class="ff-items". How can I add another class to it? I tried giving a space between the classes but that didn't function at all. Images froze without any transition or hover effect at all! I tried this:
<ul id="da-thumbs" class="ff-items da-thumbs">
( added da-thumbs id and gave 2 classes to the UL.)
Any help would be great! Thanks.