the latest version of LightBox2 (v2.8.2) now allows a link to appear in the text under an image. This works fine usually. But my link needs to call some javascript code.
The code below for example works fine when you click on Click Here.
<a class="example-image-link"
href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg"
data-title="<a href='http://localhost/'>Click Here</a> ">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
</a>
For my code, I need the href within data-title to call some javascript code. These are the ones I've tried.
data-title=" <a href='javascript:submitFormFunction();' >caption </a> ">
data-title=" <a href='#' onclick='submitFormFunction();' >caption </a> ">
data-title=" <a href='#' class='submitCreateFromPreview' >caption </a> ">
None of these work, the javascript code never gets called. It appears that if the href is not a normally structured URL (http://www.google.com or http://localhost) it simply does nothing.
This is my javascript code
$(".submitCreateFromPreview").click(function(){
submitFormFunction();
});
function submitFormFunction() {
form=document.getElementById('mainform_id');
form.target='_self';
form.action='http://localhost/create.do';
form.submit();
}
I basically need all the fields in my form to be submitted when they click on the href. This code works in other places in my webapp but it does not want to work with the LightBox description href.
Any ideas what I'm doing wrong? Or anyone else have other options that perhaps I haven't tried?
Any help would be appreciated.
Thanks
We can use jQuery '.on()' event handlers for adding events. These have the advantage that they can process events from descendant elements that are added to the document at a later time.
In above case we can have the code like below:
$(document).ready(function(){
$(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
submitFormFunction();
});
});
Even if the function is accessed directly, it executes. So, either of the two options can be implemented to execute "submitFormFunction()" function.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
<body>
<section>
<h3>Two Individual Images</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1" data-title="Optional <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" />
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/>
</div>
</section>
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function submitFormFunction(){
alert("Submit Form Function executed :: ")
console.log("Submit Form Function executed :: ");
}
$(document).ready(function(){
$(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
submitFormFunction();
});
});
</script>
</body>
</html>
Functional repository using LightBox2 (v2.8.2) can be accessed here
https://github.com/nitinsinha/Debugs.git
Related
I have some code provided by the vendor:
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
I want to replace the FREE Puppies text with an image. The vendor says it can't be done, but I disagree. I've tried several different things but nothing seems to work quite right. I'd really appreciate some help. I know I'm just missing something small. Thanks so much!
Only replacing the text with an image is not going to work, because the embedded script looks for the href attribute of the clicked element (event.target). In the case of an image inside a link tag, the target element is the image, and does not have an href attribute.
To solve that, you can catch the event on any image that is inside these links, block it, and simulate a click on the parent link.
Demo not using jQuery
var sh_lead_images = document.querySelectorAll('.sh_lead_button img');
for(var i=0; i<sh_lead_images.length; i++)
{
sh_lead_images[i].addEventListener('click', function(e){
e.stopPropagation();
e.preventDefault();
this.parentNode.click();
});
}
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Demo using jQuery
$('.sh_lead_button img').click(function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent().click();
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
If you are able to change the source html, you should can easily place an image tag.
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="wherever-you-have-your-image.png">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Regards,
F.
You can place and image tag into an a tag. Like this:
<a class="sh_lead_button" href="http://www.google.es" target="_blank">
<img src="https://www.gravatar.com/avatar/7c4c20b9134504e04754d751aa7f90c1?s=48&d=identicon&r=PG&f=1" >
</a>
There's no mention on the original question about an embedded script.
I'm trying to call a simple javascript function which hides or shows a particular div in Sharepoint. I have added the Script Editor web part with the function in there, but the anchor tags have the href removed whenever I save. Below is the code as I enter it.
Javascript:
<script type="text/javascript" charset="utf-8">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
HTML:
Show Answer 1
After I save, Sharepoint tells me that certain elements deemed "unsafe" by sharepoint would be removed. When it reloads, it removes the href as shown below:
<a>Show Answer 1</a>
Any ideas how I could get this simple function to work?
Thanks,
Jordan
If you have multiple answer you can create a simple script like this (i notice you are using jQuery)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('a').click(function(){
$('#' + $(this).data('answer')).toggle();
});
});
</script>
and the HTML:
<a data-answer="answer1">Show answer 1</a>
<a data-answer="answer2">Show answer 2</a>
...
<div id="answer1" style="display:none">Here answer 1</div>
<div id="answer2" style="display:none">Here answer 2</div>
UPDATE: Added the ready function so the script will be run only when the page load completely
I'm trying to make it so when I click on a link in a HTML page, it dynamically loads the requested page into a div with jQuery.
How can I do that?
<html>
<head>
<script type="text/javascript">
// what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4<br />
Page 5<br />
Page 6<br />
</body>
</html>
There's a jQuery plugin out there called pjax it states: "It's ajax with real permalinks, page titles, and a working back button that fully degrades."
The plugin uses HTML5 pushState and AJAX to dynamically change pages without a full load. If pushState isn't supported, PJAX performs a full page load, ensuring backwards compatibility.
What pjax does is that it listens on specified page elements such as <a>. Then when the element is invoked, the target page is fetched with either the X-PJAX header, or a specified fragment.
Example:
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
Putting this code in the page header will listen on all links in the document and set the element that you are both fetching from the new page and replacing on the current page.
(meaning you want to replace #pjax-container on the current page with #pjax-container from the remote page)
When <a> is invoked, it will fetch the link with the request header X-PJAX and will look for the contents of #pjax-container in the result. If the result is #pjax-container, the container on the current page will be replaced with the new result.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
</body>
</html>
If #pjax-container is not the first element found in the response, PJAX will not recognize the content and perform a full page load on the requested link. To fix this, the server backend code would need to be set to only send #pjax-container.
Example server side code of page2:
//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
Go to next page.
</div>
//else send full page
If you can't change server-side code, then the fragment option is an alternative.
$(document).pjax('a', '#pjax-container', {
fragment: '#pjax-container'
});
Note that fragment is an older pjax option and appears to fetch the child element of requested element.
JQuery load works, but it will strip out javascript and other elements from the source page. This makes sense because you might not want to introduce bad script on your page. I think this is a limitation and since you are doing a whole page and not just a div on the source page, you might not want to use it. (I am not sure about css, but I think it would also get stripped)
In this example, if you put a tag around the body of your source page, it will grab anything in between the tags and won't strip anything out. I wrap my source page with and .
This solution will grab everything between the above delimiters. I feel it is a much more robust solution than a simple load.
var content = $('.contentDiv');
content.load(urlAddress, function (response, status, xhr) {
var fullPageTextAsString = response;
var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
content.html(pageTextBetweenDelimiters);
});
Try with this one:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
and make sure to call this library first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
I think this would do it:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
By the way if you can avoid Jquery, you can just use the target attribute of <a> element:
<html>
<body>
<iframe id="content" name="content"></iframe>
<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
I think you are looking for the Jquery Load function. You would just use that function with an onclick function tied to the a tag or a button if you like.
You can use jQuery's getJSON() or Load(); with the latter, you can reference an existing html file. For more details, see http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a
You can through option
Try this with some modifications
<div trbidi="on">
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == '')
{contenedor.innerHTML = '';
} else{
var url = idYouTube;
contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>
<select onchange="MostrarVideo(this.value);">
<option selected disabled>please selected </option>
<option value="qycqF1CWcXg">test1</option>
<option value="hniPHaBgvWk">test2</option>
<option value="bOQA33VNo7w">test3</option>
</select>
<div id="divInnerVideo">
</div>
If you want to put a default page placed inside id="divInnerVideo"
example:
<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
I am using PrettyPhoto 3.1.4 from http://www.no-margin-for-errors.com
I am using a content handler in ASP.NET MVC3 to load images from a database. Pretty Photo is not loading the images with the API. How do I get it to work with the content handler?
Here is an image that should popup a gallery of images:
<a href='' onclick="$.prettyPhoto.open(api_images0,api_titles0,api_descriptions0);" title='UFC123'>
<img style="max-height: 160px;max-width: 260px;" id='Img31' alt='UFC123' title='UFC123' src='/img.ashx?mediaId=31' style='padding:10px' />
</a>
Here is the script I am using:
<script type="text/javascript" charset="utf-8">
var api_images0 = ['/img.ashx?mediaId=33'];
var api_titles0 = ['Gina'];
var api_descriptions0 = ['Gina Description'];
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({ theme: 'dark_rounded', social_tools: '' });
});
</script>
The documentation isn't clear about the "public api" functions that you are trying to use, and there isn't a demo for those functions, but my guess is that because you don't have any a elements that have rel="prettyPhoto", the .prettyPhoto() function is never run, so the supporting HTML that shows the popup box is never added to the DOM. Try adding rel="prettyPhoto" to your a element and see if that helps.
There were no javascript errors. I figured it out. The problem was that I needed the pound sign instead of the empty string for the href tag.
<a href='#' onclick="$.prettyPhoto.open(api_images0,api_titles0,api_descriptions0);" title='UFC123'>
<img style="max-height: 160px;max-width: 260px;" id='Img31' alt='UFC123' title='UFC123' src='/img.ashx?mediaId=31' style='padding:10px' />
</a>
If a webpage has a base href, is there anyway to ignore it when we're using #ElementId, without refreshing the page?
Here's some code:
<html>
<head>
<base href="http://www.google.com/" />
</head>
<body>
<div id="test">
Test
</div>
<button onclick="location.href='#test'">Back to Test</button>
Back to Test!
</body>
</html>
When I click on either the button or the link, I want the browser to bring the page to div#test. Without the base href tag, everything works - However, with the base-href tag, I can't do it without the help of Javascript. Is there a way to do it in a more "natural" way?
Below's a workaround that I have at the moment...
<html>
<head>
<base href="http://www.google.com/" />
<script type="text/javascript">
function goToElement(elementId) {
var baseTag = document.getElementsByTagName("base")[0];
var existingBaseHref = baseTag.href;
baseTag.href = "";
location.href = "#" + elementId;
baseTag.href = existingBaseHref;
}
</script>
</head>
<body>
<div id="test">
Test
</div>
<button onclick="goToElement('test')">Back to Test</button>
<a onclick="goToElement('test')">Back to Test!</a>
</body>
</html>
This will scroll to the element with id="test" and the return false will make it stay on the page.
Go to div with id=test
It does not seem to be possible to do what you want without either using script or addIng the full path to the href on the server
You might just have to output the full absolute URL in your link's href attribute.
For example, you could do something like this in ASP.NET (using the AntiXss library):
<a href="<%= AntiXss.HtmlAttributeEncode(Request.Url.AbsoluteUri) %>#test">
Link text...
</a>
Or something like this in PHP:
<a href="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_QUOTES, 'ISO-8859-1'); ?>#test">
Link text...
</a>
I had a similar issue when using . This was my solution that worked on interior pages, for example www.mozilla.org/about
<div>
<p>Content...</p>
<div id="target">
Target Div
</div>
</div>