I know this is pretty easy, and I am probably missing something very obvious, but here it goes.
I have an <ul> with a bunch of stuff inside.
I have set jquery, so that when <ul> is clicked, to assign it a class name, but it doesn't work.
$(document).ready(function() {
$('#list').click(function(event) {
event.stopPropagation();
$(this).addClass('left');
});
});
It works however, if the <ul> is wider than the stuff in it, and I click where there is no stuff.
Here is the HTML
<ul id="list">
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Name</h2>
<h3>Last Name</h3>
<p>
Herp derp derp, hurr durr
</p>
<p>
Herp derp derp, hurr durr
</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Name</h2>
<h3>Last name</h3>
<p>
Herp derp derp, hurr durr
</p>
<p>
Herp derp derp, hurr durr
</p>
</div>
</li>
</ul>
EDIT:
After looking at the CSS, when I click a <li>, it doesn't work for the <ul> because <li> is set as position: relative;. Any idea how to overcome this without removing the position property ?
CSS as requested : http://hastebin.com/pahaxexabo.css
The .left is the class I want to assign to the <ul>.
Well without the html, its hard to debug your javascript.
Looking at your java script, your function will trigger when an element with id 'list' is clicked.
Does your ul tag have the attribute id="list" ?
If you want clicking of any ul tags to trigger the event, change the 2nd line in your jquery to the following:
...
$('ul').click(function(event) {
...
Also, im unsure why you need this code below, it looks like it is superfluous
event.stopPropagation();
You javascript appears to be fine. The problem likely resides with your css. Try writing your HTML with the class you are adding already added and check if the ul has the desired style. Once it has the desired css style, then attempt using the jquery again.
Related
Good night, I will be quick in my explanation. I need to get information from the element clicked on the site, for example, I want to get the css information from the elements I clicked, however, they can be div, button, li, etc. Getting the information is not a problem, the problem is being to identify which was the element that received the click, because it can have any id or any class. They are not fixed ids or classes. I'm using this js code but it's not working. He's giving me the html of the whole body.
$("*").click(function() {
console.log($(this).html());
});
Can someone help me please?
Att
if I don't get you wrong, you can view the properties of any element I click on the body thanks to event bubbling.
document.getElementById("body").addEventListener("click", function(e) {
console.log(e.target)
})
<body id="body">
<div class="container">
<div>
<h5>
<button>
ı am a button
</button>
</h5>
</div>
</div>
<div class="container-fluid">
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
Above my HTML content coming dynamic. I want to add li tag in my test2 anchor link in JQUERY.
Here I have tried-
$('.box .test li:first-child').after('<li>');
But this li tag creating in wrong place. But I want my output should be like this -
<div class="box">
<ul class="test">
<li>test1</li>
<li><a class="add">test2</a></li>
</ul>
</div>
The best and correct way would be to fix your source html! A a tag inside a ul element is not valid. So your first task should be to get a correct html output.
If not possible you could use a :not selector and wrap(). So every child element, which is not a li, will be wrapped with a li element. This keeps it dynamic ...
$('ul > *:not(li)').wrap('<li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
test2
<strong>test3</strong>
</ul>
</div>
The problem is with your initial HTML, since an a element can't be a direct child of a ul element. Try to fix this in you initial rendering, and not later using javascript, simply for the reason that different browsers will act differently upon invalid HTML fragment (auto-fix it, drop it, you name it...).
Having said that, in general $('selector').wrap('<wrapperElement />') is the traditional jQuery's way of wrapping an existing element with a newly created one.
Below code will wrap li tag around a tag having class add.
$("a.add").wrap("<li>");
$(document).ready(function(){
$("a.add").wrap("<li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
you're actually looking to add an element as a parent of another one, use Jquery wrap function instead:
$(".add:eq(0)").wrap("li")
Im a newbie and im trying to create a webstie just for practice, I realized that when I want to line break one of the divs (just to make stuf fancy) all my other divs gets linebreaked though, which I dont want. how do you fix this?
<ul class = "nav">
<div class = "head_dividers"><li> Hello <span> World </span> </li> </div>
<div class = "head_dividers"><li> stuff </li></div>
<div class = "head_dividers"><li> Help </li> </div>
</ul>
</div>
You should not have the <li> tags inside of a <div> tag. You can swap them if you like, but generally, <div> is a divider, and the <ul>/<li> items setup their own spacing/breaks (on each new list item).
The <br /> tag, on the other hand, is used inside of your text to create a break at a specific point.
I would recommend something a bit more simple like this:
<ul class="nav">
<li class="head_divider">...</li>
<li class="head_divider">Text<br />Here</li>
<li class="head_divider">...</li>
</ul>
and use CSS to add any necessary styles/spacing.
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
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.