We Keep Coding

Why is my website displaying <ul> and <li> in the dom

I'm trying to display cards in my dom but in the text im showing there is some code as shown in the picture below
<div class="app">
<h1> All Fishes and Their Photos</h1>
<ul v-for="(fish, i) in fishes" :key="i" />
<li>
<div class="maincontainer">
<div class="back">
<p>{{fish['Biology']}}</p>
</div>
<div class="front">
<div class="image">
<img :src="fish['Species Illustration Photo'].src" />
<h2>{{ fish['Species Name']}}</h2>
</div>
</div>
</div>
</li>
</ul>
</div>

Remove the '/' you have at the end of the first <ul> tag, this should fix the problem, but also consider using the v-for on the <li> tag, and not the <ul> tag as
the element that must be repeated many times is <li>.

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

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>

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 ...

CKEditor div element getting replaced instead of filled

I recently wrote a CKEditor plugin to add captions to images, it all works pretty good except for one thing.
The code of the caption looks like this:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
Caption
</div>
</div>
When I select the "Caption" text and click the ordered list button, the caption_text div element changes into an ul instead of the ul being added to the div
Result:
<div class="caption_container">
<img src="image.jpg" />
<ul class="caption_text">
<li>First item</li>
</ul>
</div>
The result I would like to get is:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<ul>
<li>First item</li>
</ul>
</div>
</div>
Is there a way to achieve this?

If you don't want to touch CKEditor source code I have a simple solution for you. You could add a extra 'div' to prevent deletion of 'div class="caption_text"' so it will look like:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<div>
Caption
</div>
</div>
</div>
In the end you will have the desired:
<div class="caption_container">
<img src="image.jpg" />
<div class="caption_text">
<ul>
<li>First item</li>
</ul>
</div>
</div>