Been trying everything all day to get this to work with no luck.
I want to use the title attribute from an li element as a string inside of a completely separate span element.
Here is my code:
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<div id="slider">
<ul>
<li class="slide" title="Careers">
<img src="large-image-1.jpg" alt="Large Image 1" /> </li>
</ul>
</div>
<div id="slide-thumbs">
<ul>
<li><img src="thumb-image-1.jpg" alt="Thumbnail for Large Image 1" />
<span class="thumb-caption"><!-- need title attribute above reading "Careers" to go here --></span>
</ul>
</div>
I feel like I'm missing something easy here. I can only use Javascript to do this with the script I'm working with. PHP is not an option. Any help would be very much appreciated.
Thank you,
Justin.
var title = $('.slide').attr('title');
$('span').html(title);
The JS should work fine, but something to consider is you could do this with pure CSS and avoid the extra markup. Just display the title attribute using a pseudo-element and position it where you like:
.slide:before {
content: attr(title);
position: absolute;
display: block;
}
Since the title is already displaying on the page and you're not generating anything else in addition to it, no reason for the extra element
If there is more than one slide, better use:
$('.thumb-caption').each(function(i) {
$(this).html($('.slide').eq(i).attr('title'));
});
Related
I am a novice in html/js design. I have searched my specific requirement many ways, but couldn't find a solution. So, your help with a solution via jsfiddle or any example of syntax will be extremely helpful!!!
I have a li element like this in two different div's:
<div id="1">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
As can be seen, li tag comprises of different sub tags(called elements??) like strong, em, var. How do I hide var tag text in first div? i.e., to make it a more generic, how do I only hide(not delete) text within a sub-tag in a li tag ? Also, the text needs to be when the page loads, and not by a button click.
Thank you!
How do I hide var tag text in first div?
simply try this
$("#1 li var").hide();
to make it a more generic, how do I only hide(not delete) text within
a sub-tag in a li tag ?
$("li").children().hide(); //$("li").children("var").hide(); to hide only var
or
$("li").find("*").hide();
Like this one?
$('#1 li').find('var').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="1">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.
The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;">
<div class="index">
Participate
</div>
<div class="index" style="margin-right: 80px;">
News
</div>
<div class="index active" style="margin-left: 80px;">
<a class="active" href="/about/">About</a>
</div>
<div class="external">
Collection
</div>
<div class="index">
Contact
</div>
</nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
' + originalNavItems + '
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?
You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');
You can use
var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");
Then you can use .append() to add that html elements
Fiddle
You can clone into an imaginary div and then fetch the mainNavigation also. You can also remove the style attributes along with that. Hope this works for you...
var temp = $('<div />').html($('#mainNavigation').clone());
temp.find('*').removeAttr('style');
originalNavItems = temp.html();
The nav is cloned but the html() function only returns the HTML for the contents and that's why it disappears. You can avoid some string manipulation by adding the cloned element directly before a target element.
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
$('#mainNavigation').clone()
.find('[style]').removeAttr('style').end()
.insertBefore('#newScrolledNav .newItem');
In the previous case find('[style]') matches elements that have a style attribute.
I'm new to Stack Overflow (and js in general), so this might be really bad ettiquette, but I seem to have accidentally fixed it myself trying to debug my implementation of the first upvoted answer that #Anoop Joshi gave above. Please comment and let me know if it would have been better to just edit my question!
I decided to break the process down into separate steps – similar to #Kiran Reddy's response actually, but I hadn't got to trying his yet.
I tried:
var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.
with a console.log(styledHTML) etc under each line to check what I had at each stage – and it worked! (The code did, console.log didn't?)
I was just doing this to try and log the value of the variables at each stage, but whatever I did fixed it…
Now I need to figure out why I can't even make console.log(variable); work :-/
Try this code
$('#mainNavigation').children().removeAttr('style');
Hope this will help you.
I am using the JQuery Carousel plugin from here: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm
I have set it up as such:
<script type="text/javascript">
$(function(){
$(".carousel").carousel();
});
</script>
<div id="carouselholder">
<div class="carousel">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
</div>
</div><!--CAROUSELHOLDER-->
But when I hit the Next button it seems to shift the whole ul not the li.
Does anyone know how to fix this? (or maybe theres a better plugin?)
Below: Screen shot from Element Inspector:
The documentation on this plugin seems a bit slim. It appears that some additional styling is needed to make it work, but none of the examples illustrate this point.
Your setup is correct and in fact it will move the entire UL grouping, only showing the currently selected li. Using your simple code above, all I did was add the following CSS to make it work:
li {
float: left;
}
Just add a little more styling to your container to constrain the view and you should be good to go.
I think that is how it is meant to work
if you put a width on the carousel-wrap, so it only shows one image, the ul shifts position to show the next one
The li tags dont move
If you want to try another plugin, i recommend this one
http://caroufredsel.dev7studios.com/index.php .
Thanks for the help all, but I found that a modified version the Cycle plugin works a lot better:
http://jquery.malsup.com/cycle/nowrap.html
I'm doing a pretty typical JSON request and populating a JRendere template. It works great, but when I wrap the li in a href it loses all formatting.
HTML Code:
<script id="recipeTemplate" type="text/x-jquery-tmpl">
{{for Content}}
<a href='searchResults.html' data-transition='slide'>
<li class="ui-li ui-li-static ui-body-c" style='height: 150px; border: 0px; margin-left: 20px; margin-right: 20px;'>
<img src="{{:ImageURL}}" style='max-height: 125px; max-width: 125px; position: absolute;'/>
<div style='margin-left: 50px;'>
<h3 style="white-space : normal;">{{:Title}}</h3>
<h3 style="white-space : normal;">Ratings:</h3>
<p style="white-space : normal;">{{:Description}}</p>
</div>
</li>
</a>
{{/for}}
</script>
The JS is as follows:
$("#search").focusout(function()
{
var searchTerm = $("#search").val();
$.getJSON("http://website?searchterm=" + searchTerm + "&callback=?",
function (data)
{
var htmlString = $("#recipeTemplate").render( data );
$('#results').html(htmlString).listview('refresh');
});
});
It looks as above. Why does it lose the CSS?
Thanks, Graeme.
It works great, but when I wrap the li in a href it loses all
formatting.
First of all, having an <li> within an <a> tag is invalid HTML.
Your CSS is most likely relying on a specific order, targeting an element then maybe another element which has to have a specific class inside that element, and so on.
By adding the <a> around the <li> element you have now changed the expected order and you CSS is not able any more to match the selectors.
Placing your <a> tag inside the <li> instead could keep the CSS intact and at the same time be valid HTML, well, assuming you have ul or ol around the set of li's in the final HTML.
Check your CSS and make sure you are not messing with the expected order of nested elements or classes. Then either ass the <a> so it doesn't break the CSS or update the CSS to match your new hierarchy.
I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.