I have made a plugin which uses click events, however sometimes my clickable element may be within an A link, however it might not be a direct child, is there a good way to stop the a link from firing whilst not knowing it's position?
For example:
<div id="lightbox">
<a href="">
<div class="twocol">
<img src="http://www.ducati.com/cms-web/fs//MediaGalleries/345/MediaGallery_345008/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.jpg/SBK-1199Panigale-S_2012_Studio_Tricolore_B01_1920x1280.mediagallery_output_image_[1920x1080].jpg" alt="Ducati Panigale 1199 - Image 1" class="responsive-img">
</div>
</a>
<a href="">
<div class="twocol">
<img src="https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg" alt="Ducati Panigale 1199 - Image 2" class="responsive-img">
</div>
</a>
</div>
I'm not really sure if your clickable element is always in a element with a class name.
But one way to do it is to check if the parent is a <a> tag and add event.preventDefault.
Related
I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>
I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.
So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#
<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
<div class="nimageone">
<img src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
</div>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
Css
.change
.nimageone img {display:none}
desktop here
You have not included the tree structure of your HTML element comprehensively.
You can achieve what you are trying to do with the following.
<div>
<a id="mni" href="#">
<div class="container4"
onclick="myFunction(this)">
<div class="nimageone"><img
src="http://4309.co.uk/wp-
content/uploads/2020/05/IMG_20200509_165113-1-
219x300.jpg" alt="" width="350" height="300" class="
size-medium wp-image-14178" /></div>
</div>
</a> //remember to close the <a> tag here before the
footer item
/////Your footer item can come below here
<footer>
</footer>
</div>
If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.
I am having the following HTML content to be displayed,
<html>
....
....
<body>
<div class="list-group search-results-container">
<a class="list-group-item" href="/raghav">
<div class="clearfix">
<a class="thumb avatar pull-left m-r">
<img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg">
</a>
<div class="clear">
<div class="m-t-xs"> Raghav G </div>
</div>
</div>
</a>
</div>
</body>
</html>
I have validated the HTML, doesn't seem to have any errors. But strangely, Chrome is rendering the HTML by closing the tag early as follows,
<div class="list-group search-results-container">
<a class="list-group-item" href="/raghav"></a>
<div class="clearfix">
<a class="thumb avatar pull-left m-r"></a>
<img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg">
<div class="clear">
<div class="m-t-xs"> Raghav G </div>
</div>
</div>
</div>
I have also troubleshooted for any misplacement of closing tags, but everything is properly closed. Chrome renders as this only inside that particular <div>
The HTML5 specification provides information on this:
"...there must be no interactive content descendant." source
"Interactive content" is described as follows:
"a, audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, menu (if the type attribute is in the toolbar state), object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)" source
It is actually valid, then, for an a element to contain a div, so long as it contains none of the interactive elements described above. This is affirmed by the first link, where the following can be found:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
I create a div box with css : overflow: scroll. Here is my code:
<div id="resultbox" style="overflow:auto">
<div id="abc"><a id="p1" href="123.php" class="fac_result" >abc</a>
<a id="p2" href="456.php" class="fac_result" >def</a>
<a id="p3" href="789.php" class="fac_result" >ghi</a>
</div>
<div id="ccc">
<a id="pt1" href="123.php" class="fac_result" >123</a>
<a id="pt2" href="456.php" class="fac_result" >456</a>
<a id="pt3" href="789.php" class="fac_result" >789</a>
</div>
<div id="kkk">
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
<a id="s2" href="fff.php" class="fac_result" style="background-color:#C7C8CA">fff</a>
<a id="s3" href="ggg.php" class="fac_result" >ggg</a>
</div>
<div id="opo">
<a id="t1" href="qqq.php" class="fac_result" >rrr</a>
</div>
</div>
How can I do so that after an user clicked a link after the page refreshed but it will still return user to the row that I just selected which is highlighted background with background-color:#C7C8CA but I don't wish to scroll down the page. I just want it bring me back the selected link within the div box only. Is it possible?
You need to pass id via hash eg #id. Let's assume you want to redirect user to this row scrolled:
<a id="s1" href="ddd.php" class="fac_result" >wer</a>
You would redirect using:
page.php#s1
page.php is supposed to be the same page where above link is defined.
Working example is right here, click on following link:
My Answer
It would take you to my answer scrolled directly. The same technique is used here, here is the url:
https://stackoverflow.com/questions/7844837/
click-on-a-link-and-go-back-to-the-link-row-without-scroll-back/7845469#7845469
As can be seen at the end, there is #7845469 which is the id of row containing my answer.
Are you doing it cross pages?
You could use the scrollTo plugin, which can scroll inside a div.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Their examples are created that way: http://demos.flesler.com/jquery/scrollTo/
If you want it on pagereload, and are setting the background dynamic - then just do:
$('resultbox').scrollTo($('a[background-color=#C7C8CA]'));
Made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:
<div id="p61789" class="post bg2">
I tried
var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below
<div class = "content">
and below the user posting area there is:
<div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.
So shouldn't something like:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...
EDIT: More detail added for Pointy:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
Re: Testing new bbcode - ignore
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
xxx
</strong>» 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>
the problem is you're assuming that the this context when you're executing within the script block is the script block itself, which is incorrect. If there is no context explicitly given, then your context is the window DOM element. Is there any reason you can't move this code to the page level, and initialize all the posts at page load?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
Have you tried Javascript's DOM functions to add it?
http://www.javascriptkit.com/javatutors/dom2.shtml
For example, to insert right after the current script, with id "script1":
document.getElementById("script1").parentNode.appendChild( newelement );
You can add raw html too, just set innerHTML of the new element.