I have a list of Li's that wen clicked on will have a class of plSel, When clicked, I want them to have a different video playing and the other videos, clear off
This is how I have it down on my html:
<div class="fullscreen-bg">
<video id="appendVid" loop muted autoplay poster="assets/one.png" class="fullscreen-bg__video">
</video>
</div>
and later the lis appear like this:
<li id="numb01"></li>
<li id="numb02"></li>
<li id="numb03"></li>
<li id="numb04" class="plSel"></li> //whenclicked
and this is how I've laid out my JS so far, the problem is when it gets to be more than one, it just wont work
$(document).ready(function(){
if ($('#numb01').hasClass('plSel')) {
$('#appendVid').append('<source src="assets/one.mp4" type="video/mp4"><source src="assets/one.ogv" type="video/ogg">');
});
how do i continue it on to remove what was appended and append the next one for each li each video would have something like this appended <source src="assets/two.mp4" type="video/mp4"><source src="assets/two.ogv" type="video/ogg">
thanks for your help
It's hard to pair them as you need grammar there. I mean class one with numb01. It could be better if you keep those naming convention better. In case you still them unmodified, at least you should collect them within a scope. Just like li has always ul as their parent.
If both video and list have their position in correct order, here I use jQuery index to find its position, then show it and collect its siblings element then hide them. Then find which video to show by found index, hide its siblings, that's all.
I also showing here on how easier you'll get it if you can store related selector with better naming convention. Example here using data- attribute on button to relate target li visibility.
$(function () {
var index = $('.numb .plSel').index()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
$(document).on('click', '[data-toggle]', function () {
var targetId = $(this).data('toggle')
targetId = $(targetId)
var index = targetId.index()
targetId.show().siblings().hide()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
.numb {
margin-top: 20px;
}
.numb > li:not(.plSel) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullscreen">
<div class="fullscreen-bg one">
One
</div>
<div class="fullscreen-bg two">
Two
</div>
<div class="fullscreen-bg one">
Three
</div>
</div>
<ul class="numb">
<li id="numb01" class="plSel">Numb 1</li>
<li id="numb02">Numb 2</li>
<li id="numb03">Numb 3</li>
</ul>
<button type="button" data-toggle="#numb01">Toggle One</button>
<button type="button" data-toggle="#numb02">Toggle Two</button>
<button type="button" data-toggle="#numb03">Toggle Three</button>
I've adjusted your HTML, but I think this is what you want. FIDDLE
$(document).on("click", ".menu ul li a", function() {
$(".container > div").eq($(this).parent().attr("id")-1).addClass("plSel");
$(".container > div").not(".plSel").css("display", "none");
})
.menu {
float: left;
margin-bottom: 25px;
}
.container {
float: left;
clear: left;
}
.fullscreen-bg {
float: left;
}
li {
list-style: none;
float: left;
min-width: 50px;
text-align: center;
}
li a {
text-decoration: none;
color: darkblue;
}
li a:hover {
color: red;
}
.fullscreen-bg:not(:last-child) {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
<li id="4">Four</li>
<li id="5">Five</li>
<li id="6">Six</li>
</ul>
</div>
<div class="container">
<div class="fullscreen-bg one">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg two">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg three">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg four">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg five">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg six">
<img src="http://placehold.it/100x150" />
</div>
</div>
Related
I am trying to close a custom jquery drop down on click of outside of dropdown, just like default behavior of HTML select dropdown, I tried to use the window click but that is creating trouble in opening the dropdown it self.
$(".selected").click(function() {
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
</ul>
</div>
JSfiddle
https://jsfiddle.net/5zgyouwL/1/
This will work fine for you:
In this method I have used event.stopPropagation();
Your method was right on the path, it just needed some tweaks - I have used the click on the <html> to but the difference is that I have prevented the body click on the .selected and .custom-dropdown-list li using event.stopPropagation();.
$("html").click(function(event) {
$(".custom-dropdown-list").removeClass("open");
});
$(".selected").click(function() {
event.stopPropagation();
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
event.stopPropagation();
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>
Hope this was helpfull.
I think what you might want is when clicked anywhere else of custom select/dropdown it must close.
So here it is:
$(".selected").click(function(){
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function(){
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
/*Mouse click anywhere but custom select dropdown, will close it. */
$(document).mouseup(function (e) {
var container = $(".custom-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".custom-dropdown-list").removeClass("open");
}
});
.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open { display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>
The key is Event.stopPropagation()
$('body').on('click', function(){
// close the drop down
});
$('.custom-dropdown').on('click', function(e){
e.stopPropagation();
});
You use Mouse Up Event Also Like this
$(document).mouseup(function(e)
{
var container = $(".custom-dropdown");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
I believe #weBer answered your question , but another way to do this is to have an event handler right on your html element and inside that check if the targeted element or its children are being clicked :
$('html').on('click' , function(e){
if($(e.target).closest('.custom-dropdown').length ) return
$(".custom-dropdown-list").toggleClass("open");
});
FIDDLE HERE
I have menu and submenu which was created totally as divs instead of ul li. So, on hovering the menu element, I need to target a particular div and show as submenu. I have written a jquery event by passing submenu id as data-target to target the specific div to show as submenu. When I apply break points, the loop is going inside., but unable to remove initial property of submenu (display:none) to (display:block). Here is the plunker link for more details. please let me know where i`m going wrong.
I understand this div approach is not right one. But I have to develop according to existing HTML
$("#mainDiv div").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(liID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
jQuery('#' + menuliID).hover(function(){
console.log("entered inside function");
$('#' + subMenuId).css('display', 'block !important');
console.log('"#' + subMenuId + '"');
},
function () {
console.log("entered inside 2nd function")
jQuery('#' + subMenuId).css('display', 'none');
}
);
}
);
please change
$('#' + subMenuId).css('display', 'block !important');
into
$('#' + subMenuId).show();
as it is not necessary to apply .css() as you can do your work with .show() or .hide()
and please see my working snippet
// Code goes here
$("#mainDiv > .menuli").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(menuliID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
if($('#' + subMenuId).is(":visible")){
$('#' + subMenuId).hide();
}else{
$('#' + subMenuId).show();
}
}
);
/* Styles go here */
#mainDiv div{
border:1px solid;
width:30%;
}
.submenu{
position:absolute;
top:0;
left:24%;
}
.submenu ul li{
border:1px solid;
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="mainDiv">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
</body>
</html>
You can simplify your code to the following. You just need to toggle the display of the sub menus when hover over main menu.
I have attached hover event to submenu so that it is displayed on mouse over.
//Toggle display of submenu when hover on main menu
$("#mainDiv div").hover(function () {
$('#' + $(this).attr('data-target')).toggle();
});
//Display submenu when hover on it
$(".submenu").hover(function(){
$(this).show();
}, function(){
$(this).hide();
})
.submenu {
border: 1px solid transparent;
}
.menuli{
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv" style="display:inline-flex;padding-top:10px;">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
I have a list with a bunch of items. If there is a certain amount of items the list becomes a scrollbar and if the user clicks a button to see an item which for example is at the bottom of the list, it should automatically scroll to that element. I created a scroll function but it doesn't seem to work correctly.
the javascript looks like this:
$('a').on('click', function(e){
var id = $(e.currentTarget).attr('id') // catch the ID of the clicked item
$('#left').animate({ // #left is the container of the list
scrollTop: $('#left ul li#'+id+'').offset().top // scroll to the element which metches the cliced ID
}, 500);
})
I created a simple JSFIDDLE - Could someone help me out?
Thanks alot!
The problem is that you are using .offset().top that calculate the offset relative to the window but not to the container.
The solution is to use .offsetTop
note: I really don't know where the extra 8 pixels come from but it works..
$('a').on('click', function(e){
var id = $(this).attr('id')
$('#left').animate({
scrollTop: $('#left ul li#'+id+'')[0].offsetTop - 8
}, 500);
})
#con {
}
#right {
float: right;
}
#right a {
display: block;
}
#left {
float: left;
height: 500px;
overflow: scroll
}
#left ul {
padding: 0;
margin-top:20px;
}
#left ul li {
}
#left ul li div {
height: 100px;
width: 100px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="left">
<ul>
<li id="1">
<div>
Item 1
</div>
</li>
<li id="2">
<div>
Item 2
</div>
</li>
<li id="3">
<div>
Item 3
</div>
</li>
<li id="4">
<div>
Item 4
</div>
</li>
<li id="5">
<div>
Item 5
</div>
</li>
<li id="6">
<div>
Item 6
</div>
</li>
<li id="7">
<div>
Item 7
</div>
</li>
<li id="8">
<div>
Item 8
</div>
</li>
<li id="9">
<div>
Item 9
</div>
</li>
<li id="10">
<div>
Item 10
</div>
</li>
<li id="11">
<div>
Item 11
</div>
</li>
<li id="12">
<div>
Item 12
</div>
</li>
</ul>
</div>
<div id="right">
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
</div>
</div>
https://jsfiddle.net/znwjvtzg/
function changecontent(description){
console.log(description);
document.getElementById('content').innerHTML = description;
}
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
I'm planning to make multiple layouts for the page and based on which item is clicked the content should be changed accordingly. The problem is that I don't know how to make the java function change the content differently based on which item is clicked...
can you make something like this:
<li onClick="changecontent('Math');">Math</li>
this should work..
So, if I understand you correctly, you have several descriptive texts for each of your subjects that you want to dynamically insert into #content. You could just store your texts in variables:
var mathDesc = "Math is awesome and <b>not scary at all!</b>";
You could then insert it to #content like this:
<li onClick="changecontent(mathDesc);">Math</li>
Personally I would use a different approach: Having multiple content-divs and hiding all but one at each time.
One way to hide content is to programmatically assign a className, e.g. hidden and to assign display:none as CSS rule to that class.
Below is an example snippet. I identified the content based on the list-item-id, which I think is what you wish to do.
function changeContent(id) {
var content = document.getElementsByClassName("content");
for (var i = 0; i < content.length; i++) {
if (content[i].id === id + "Content") {
content[i].classList.remove("hidden");
} else {
content[i].classList.add("hidden");
}
}
}
document.getElementById("chooseSubject").onclick = function(e) {
changeContent(e.target.id);
}
#chooseSubject {
list-style-type: none;
}
#chooseSubject li {
cursor: pointer;
}
#chooseSubject li:hover {
background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
background-color: rgb(167, 114, 169);
}
.hidden {
display: none;
}
<ul id="chooseSubject">
<li id="Math">Math</li>
<li id="Science">Science</li>
<li id="Geography">Geography</li>
<li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
You learn about things that have no function in Arts.
</div>
you have to pass description param to the method like this way
<li onClick="changecontent("Math");">Math</li>
Here is how I did it, sorry my question was vague im quite new at this kind of thing....
<script>
function changecontent(clicked_id){
alert(clicked_id);
}
</script>
<!doctype html>
<html>
<head>
<style>
}
.editingfunction{
background-color: ;
text-decoration-color: white;
border :none;
opacity: 0.4;
width: 100px;
}
.col:active {
background-color: rgb(167,114,169);
cursor:pointer;
text-decoration-color:red;
}
.col:visited
{
text-decoration-color:red;
}
body {
background: ;
font-family: ;
text-decoration-color: white;
}
</style>
</head>
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Click Subject</li>
<li class="col" id="Math" onClick="changecontent(this.id);">Math</li>
<li class="col" id="Science" onClick="changecontent(this.id);">Science</li>
<li class="col" id="Geography" onClick="changecontent(this.id);">Geography</li>
<li class="col" id="Arts" onClick="changecontent(this.id);">Arts</li>
<li class="col" id="Buisness" onClick="changecontent(this.id);">Buisness</li>
<li class="col" id="Health" onClick="changecontent(this.id);">Health</li>
<li class="col" id="Social_Science" onClick="changecontent(this.id);">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
<!-- begin snippet: js hide:false -->
how can i keep li with iconsrc="/_layouts/15/images/delitem.gif" image hidden as this div is injected by first party and I am third party trying to hide it.
$("<style> what will go here ???? { display: none; }</style>").appendTo(document.documentElement);
How can I select list item with iconsrc="/_layouts/15/images/delitem.gif" from document.
<div class="ms-core-menu-box ms-core-menu-hasIcons ms-core-defaultFont ms-shadow" title="" dir="ltr" contenteditable="false" style="top: 0px; position: absolute; visibility: visible; left: -129px; width: 127px;" flipped="false">
<ul class="ms-core-menu-list">
<li type="option" text="Delete" onmenuclick="spgridcontainer_WPQ2_rowcontextmenu_onclick(0);" iconsrc="/_layouts/15/images/delitem.gif" iconalttext="Delete" enabled="true" checked="undefined" id="mp43_0_0" class="ms-core-menu-item">
<a class="ms-core-menu-link" id="mp43_0_0_Anchor" href="javascript:;" onclick="return false;" title="Delete">
<div class="ms-core-menu-icon">
<img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON">
</div>
<div class="ms-core-menu-label" id="">
<span class="ms-core-menu-title">Delete</span>
<span></span>
</div>
<span class="ms-accessible"></span>
<div></div>
</a>
</li>
</ul>
</div>
Point is keep delete button hidden whenever this list is injected in into the page.
Keep it simple with css attribute selectors:
li[iconsrc="/_layouts/15/images/delitem.gif"] {
display:none;
}
<ul>
<li iconsrc="/_layouts/15/images/delitem.gif">
<img src="/_layouts/15/images/delitem.gif" alt="Delete" title="Delete" id="mp43_0_0_ICON" />
</li>
<li>
<img src="/_layouts/15/images/adasdasfafsdfs.gif" alt="sdfsdfsdf" title="Blablalbavbaab" id="fsdfsdfsdf"/>
</li>
</ul>
you can use list's id attribute in the style tag to keep it hidden:
<style>
li#mp43_0_0 {
display: none;
}
</style>
may be try like this:
$(document).ready(function(){
$('ul li').each(function(idx, li) {
if($(li).attr('iconsrc') =='/_layouts/15/images/delitem.gif'){
$(li).hide();
}
});
});