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?
Related
I am using links in an HTML template to load HTML files(e.g. inc_1.html and inc_2.html) as per below code. These HTML files are very similar forms which have the same div and checkbox id's. The purpose of each form is to calculate the cost of a service. JavaScript and jQuery is used to do the math. Users check the items they want using a checkbox and they get a total cost.
<script>
$(document).ready(function () {
$('a#f1').click(function(){
$('#tutitionPane').load( 'inc_1.html' );
});
$('a#f2').click(function(){
$('#tutitionPane').load( 'inc_2.html' );
});
});
</script>
...as the user clicks on a link e.g. <a id="f1" href="#">form1</a> or <a id="f2" href="#">form2</a>
it loads the html file into a <div id="#tutitionPane"></div> in the main template.
The problem is that the first form they click on all the calculations they make are correct but the second form they click on the values are off. I assume there's conflicts with the id's and values being set by interactions with the first form that was loaded.
Can I use an unbindmethod or something to reset the files as they get loaded into the main template? A forced refresh of the page would work but i don't want to do that.
The gist of the main template is like:
<!doctype html>
<html lang="en">
<head>
<title>Samp</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/switch.min.js"></script>
<script>
$(document).ready(function () {
$('a#f1').click(function(){
$('#tutitionPane').load( 'inc_1.html' );
});
$('a#f2').click(function(){
$('#tutitionPane').load( 'inc_2.html' );
});
});
</script>
</script>
</head>
<body class="py-4">
<main>
<div class="container">
<a id="f1" href="#">form1</a>
<a id="f2" href="#">form2</a>
<div id="tutitionPane"></div>
</div>
</main>
</body>
</html>
Sample js calc:
function t1() {
tuition = tuition === 0 ? 53498 : 0;
document.getElementById('t1').innerText = '$' + tuition;
document.getElementById('t1-total').innerText = '$' + tuition;
document.getElementById('total').innerText = '$' + (tuition + activity + program + orient + health + laboratory + room * roomMonths + personal * personalMonths + education * educationMonths + transport * transportMonths);
}
Any advise appreciated! Thanks!
I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.
// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<?= $row->comment; ?>
<script type="text/javascript">
function toggleHistoryNotes(status) {
var link = $('.' + status + '-history-comment-link');
var time = link.attr('data-time');
alert(time);
}
</script>
How can I target which link was clicked and do the ajax call to toggle the comment status?
You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.
$('.pull-right a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<script type="text/javascript">
$('a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
});
</script>
I am trying to use the new Paypal asset code (https://www.paypal.com/uk/webapps/mpp/refunded-returns/business), but it doesn't seem to work. It seems straight forward. I have just pasted the following into a page
<script type="text/javascript">
var mpt = new Date();
var mpts = mpt.getTimezoneOffset() + mpt.getTime();
document.write("<script type=\"text\/javascript\" src=\"https:\/\/altfarm.mediaplex.com\/ad\/js\/\?sz=120x600&lc=en_GB&enc_id=&mpt=" + mpts + "&mpvc=\"><\/script>");
</script>
<noscript> <img src="https://adfarm.mediaplex.com/ad/nb/?sz=120x600&lc=en_GB&enc_id=" alt="Click Here" border="0"> </noscript>
But, it produces no result. Any thoughts?
I see there is a parameter missing, try using the following ensuring that the size variable reflects the banner size you want:
<script type="text/javascript">
var mpt = new Date();
var mpts = mpt.getTimezoneOffset() + mpt.getTime();
document.write("<script type=\"text\/javascript\" src=\"http:\/\/altfarm.mediaplex.com\/ad\/js\/27739-224464-12439-0\?enc_id=&sz=120x600&mpt=" + mpts + "&mpvc=\"><\/script>");
</script>
<noscript>
<a target="_blank" href="http://adfarm.mediaplex.com/ad/nc/27739-224464-12439-0?enc_id=BXFC2QNHPNKAG&sz=120x600">
<img src="http://adfarm.mediaplex.com/ad/nb/27739-224464-12439-0?enc_id=&sz=120x600" alt="Click Here" border="0">
</a>
</noscript>
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 a JS button for Tumblr, which I've customised to my blog's variables. The button loads a pop-up window, but instead of appearing under each individual post, they're all grouped together. Also, it's outputting: " into the Tumblr share screen title instead of actual quotes.
How can I centre the pop-up window on being clicked?
<script src='http://platform.tumblr.com/v1/share.js'/>
<span id='tumblr_button_abc123'></span>
<script type='text/javascript'>
var strPostUrl = "<data:post.url/>";
var strPostTitle = '<data:post.title/>';
var tumblr_link_url = strPostUrl.replace("http://","");
var tumblr_link_name = strPostTitle.replace(/"/g, '"');
</script>
<script type='text/javascript'>
var tumblr_button = document.createElement("a");
tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name));
tumblr_button.setAttribute("title", "Share on Tumblr");
tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
tumblr_button.innerHTML = "Share on Tumblr";
document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>
You have multiple span with the id tumblr_button_abc123, so when you add a button to this id, only the first span get the buttons