CSS3 How do i add a hyperlink to <div data-image="#"> - javascript

sorry i've tried asking this before and got no good results, so here's trying again.
I have tried many things and still haven't had any good results.
The code is here -> PasteBin
I want to add a hyperlink to the data-images for the ninja slider. I've never encountered data-image before but i can't use img src="#" cause that doesn't work with the javascript if you guys need any more information, let me know. This is driving me insane!
<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>
this is the troublesome part.

Simply enclose your <div>s within an <a> tag. That way the <div>s are technically links.
<div id='ninja-slider'>
<ul>
<li>
<a href="images/md/1.jpg">
<div data-image="images/md/1.jpg"></div>
</a>
</li>
<li>
<a href="images/md/2.jpg">
<div data-image="images/md/2.jpg"></div>
</a>
</li>
<li>
<a href="images/md/3.jpg">
<div data-image="images/md/3.jpg"></div>
</a>
</li>
<li>
<a href="images/md/4.jpg">
<div data-image="images/md/4.jpg"></div>
</a>
</li>
</ul>
</div>

you can use java script to add link
Example:
<div onclick="javascript:location.href='http://www.google.com/'" data-image="images/md/1.jpg"> </div>
Also you can use css to change the pointer
#ninja-slider ul li div{
cursor:pointer;
}
Thanks..

Try using:
<div onclick="location.href='http://www.example.com';" />
Or use span or a tags instead
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>

Related

css selector for visible only first section content

I have a JavaScript toggle so T need to tried to collapse all sections on load by default - by inserting
ul.section-content{
display:none;
}
and it is working. But when I tried to hide first-child or not first-child it is not working.
.cscr .csec .section ul:first-of-type {
display: none;
}
<div class="cscr">
<ul class="csec">
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section01</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content">
<li class="course-item">
<h1>lesson01</h1>
</li>
</ul>
</li>
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section02</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content"> /* to hide this */
<li class="course-item">
<h1>lesson02</h1>
</li>
</ul> /* to hide this */
</li>
</ul>
</div>
second case:
and how to display only first and not others with help of not-first-child
screenshot of what is needed
Do you want something like this? https://codepen.io/anon/pen/YOOXOv. Change the CSS properties to whatever you want.
Here you are selecting all sections except the first one and then selecting ul inside them.

jQuery bxSlider and jQuery-ui tabs

I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?
Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>

Find nested children of li

I know it is ugly, but I need to find out how to get the attribute of <a> tag, of each <li> that has a <span> with class jqx-checkbox-check-checked, if the <li> contains another set of <ul><li>. Only direct <span> will be check for the desired class(jqx-checkbox-check-checked)
This is the code sample:
<li>
<span></span>
<div>
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqxtree item">
<b style="color:black"> item1</b>
</span>
<ul class="jqx-tree-dropdown" >
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class="chkbox jqx-checkbox">
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqx-tree-item">
item2
</span>
</li>
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class=""><div>
<div class="jqx-checkbox-default jqx-rc-all" >
<span class="jqx-checkbox-check-checked"></span>
</div></div></div>
<span class="jqx-rc-all jqx-tree-item">
<b style="color:black"> item3</b>
</span>
</li>
</ul>
</li>
</ul>
</li>
I know it is not simple! but if someone can show me the right jquery approach, I will be more then grateful
I dont fully understand your question - but I think you need to have a read of the following jQuery methods :
closest()
next()
find()
Using a combination of those you might be able to get a handle on the object you need
Done it :
$('.jqx-checkbox-check-checked').each(function(){
alert($(this).parent().parent().parent().next().find('a')
.attr('href'));
});
Working example : http://jsfiddle.net/manseuk/CEYXc/
Your HTML is all over the place ...

adding an div in autosuggest

i am implementing the bsn autosuggest
can any one tellme how can i add an div in the result the result will be formed like this
<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
<div class="as_header">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
<ul id="as_ul">
<li>
<a name="1" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
</a>
</li>
<li>
<a name="2" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
</a>
</li>
</ul>
<div class="as_footer">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
</div>
i need to add an diva above the ul as the Category like
<div>Category</div>
i tried
var tmp = _bsn.DOM.createElement("div", {className:"tmp"});
and i need to know how to add values to the div using java script .....
This autocomplete system hasn't been updated since 2007. I think it'd be wise for you to try something that's more up to date. Do you use jQuery? This is what I'd recommend: http://docs.jquery.com/Plugins/autocomplete, it handles all the work for you.
An advantage with using jQuery is that you can utilize Google's CDN: http://css-tricks.com/google-cdn-naming/
There's a very high chance your visitor won't have to download jQuery cause it's already been used on another site.

jQuery with div is not working

I have to create one expandable /collapseable panel in jQuery, and facing some issues.
code
HTML
<div>
<img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
<div>
<span>
Hello
</span>
<ul class="myul">
<li>one</li>
<li>Two</li>
</ul>
</div>
<img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
<div>
<span>
r u there
</span>
<ul class="myul">
<li>three</li>
<li>four</li>
</ul>
</div>
</div>
jQuerycode:
$(document).ready(function() {
$(".myul").hide();
$("img").click(function() {
$(this).next(".myul").slideToggle(600);
});
});
when I delete the inner div tag
<div>
<span>
Hello
</span>
its working fine, but with the innere div its not working.Can somebody help.
Thanks.
EDIT:
if the code is something like:
<li class="first">
<span>
<img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" width="15" height="15" alt="arrow" />
</span>
<div class="mydiv">
<h3>
...
</h3>
<span>.... </span>
<span>.... </span>
<ul class="myul">
.......
then i have tried ur code..but its not working.am i missing something.
$(this).next("div").find(".myul").slideToggle(600);
next is looking for siblings. With the div, .myul isn't on the same level as the image, so your code fails.
For the update code, try:
$(this).parent().next("div").find(".myul").slideToggle(600);
The image is inside a span, so obviously the div isn't next to the image.

Categories