I'm trying to create an <li> in which two elements are located, an <a> with <span> and a second <a> that holds a variable, html. However, the variable, which is a glyphicon, jumps down below the other <a>. How can I fix this?
var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li id=" + id + "><span>" + conversation.name + "</span>" + html + "</li>");
You seem to have put the class definition on the wrong item. I moved it over to the li.
html="test"
id="6"
conversation={name:"bob"}
var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li class=\"list-group-item\" id=" + id + "><a href=\"#\" ><span>" + conversation.name + "</span></a>" + html + "</li>");
li {
list-style-type:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<div id="conversations"></div>
I change the tag of the glyphicon to button instead of a. Solved the issue. Sorry for the inconvenience
Related
I'm trying to create a Lightbox for Image.
You can see Perfectly working demo of this code here https://jsfiddle.net/hibbard_eu/zwk954Ln/
It's working fine for me except it's not showing the cross symbol to get back to previous page.
Here's the code:
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_0000-Banner_01.JPG"
data-lightbox="gallery-1"
data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a> 
<span class='divider'>|</span>
<span class='caption'>A banner with some cars</span>"
id="1">
<img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_0000-Banner_01.JPG">
</a>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#lightbox").on("click", "a.add", function(){
var new_caption = prompt("Enter a new caption");
if(new_caption){
var parent_id = $(this).data("id"),
img_title = $(parent_id).data("title"),
new_caption_tag = "<span class='caption'>" + new_caption + "</span>";
$(parent_id).attr("data-title", img_title.replace(/<span class='caption'>.*<\/span>/, new_caption_tag));
$(this).next().next().text(new_caption);
}
});
</script>
How can I show the cross sign to return back?
Or is there any better example for this on jsfiddle?
My markup is set up like so:
<div class="media-body" >
<h5 class="media-heading">
<strong id="head">{{$blog->Title}}</strong>
<strong id="head2">{{$blog->Title}}</strong>
</h5>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
I have 2 buttons using jquery to show and hide (which act as a show more show less) the two tags within my h5 tag. However I can't seem to use this code to ensure that the strong tag with id="head2" is not displaying. I've tried
<style>
.head2
display:none;
</style>
I've also tried
<style>
strong.head2
display:none;
</style>
Im unsure if this has anything to do with Jquery so ive pasted that in below just in case.
jQuery Code:
$(document).ready(function(){
$("#head").html(function(i, h) {
var words = h.split(/\s/);
return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>';
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("#head2").hide();
});
$("#show").click(function(){
$("#head2").show();
});
$("#hide").click(function(){
$("#head").show();
});
$("#show").click(function(){
$("#head").hide();
});
});
You're targeting a class of .head2 in your CSS, but have an id. Use an id # selector instead. For example...
<strong id="head2">{{$blog->Title}}</strong>
#head2 {
display:none;
}
See CSS Selector Reference for more information
I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});
I'm using Ruby on Rails to implement a simple edit/submit button to replace the content of h4 that has class named "special-content".
Here is my code for rhtml:
<div class="modal-body" style="height: 280px !important;">
<%= image_tag("special/turkey.png", :alt => "turkey", :class => "special-img") %><br>
<h4 class="special-content">#93 Turkey, Avocado & Cheese</h4><h4> with Small Sized Drink & Chip</h4>
</div>
and here is my code for jQuery, which is implemented right above the rhtml code:
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "#edit", function() {
$('#edit').replaceWith('<a class="btn" id="submit">Submit</a>');
$('.special-content').replaceWith('<input class="special-content-edit" type="text" value="' + $('.special-content').html() + '">');
$('.special-img').replaceWith('<input class="special-img-edit" type="text" value="' + $('.special-img').attr('src') + '">');
});
$("body").on("click", "#submit", function() {
$('#submit').replaceWith('<a class="btn" id="edit">Edit</a>');
$('.special-img-edit').replaceWith('<img class="special-img" src="' + $('.special-img- edit').val() + '">');
$('.special-content-edit').replaceWith('<h4 class="special-content">' + $('.special-content-edit').val() + '</h4>');
});
});
</script>
The jQuery should allow users to replace the h4 content. Everything works fine. However, if I navigate to another link and come back to the page, the h4 content changes back to the original content ("#93 Turkey, Avocado & Cheese"). How can I preserve the changed element?
I am using http://jsfiddle.net/eLENj/493/ as a guide line to create 2 stacked buttons in an li element.
This is the code I am using
'<li><div class="ui-grid-a">' +
'<div class="ui-block-a" style="width: 75%;">' +
'<div data-role="fieldcontain">' +
'<h3>Address Details:</h3>' +
'<p>Address 1</p>' +
'</div>' +
'</div>' +
'<div class="ui-block-b" style="width: 25%; float: right;">' +
'<div data-role="controlgroup" data-type="horizontal" style="height: 20px;">' +
'Map' +
'Delete' +
'</div>' +
'</div>' +
'</div>' +
'</li>').listview('refresh');
But what I end up with are two "regular" hyperlinks which look like "MapDelete". Any ideas why the buttons are not being rendered correctly?
Method listview('refresh') will style ONLY a listview.
Because buttons are not part of a listview they will be disregarded.
You will need to style them separately like this:
$('[data-role="button"]').button();
Or you can use this method on your content DIV:
$('#contentDivID').trigger('create');
If you want to find more about this topic take a look at my other blog ARTICLE describing how to enhance dynamically added jQuery Mobile content.
EDIT :
Working example: http://jsfiddle.net/Gajotres/UDBCM/
You will need to position them by yourself + find some custom map icon.