How to add a div that does not damage the view? - javascript

My case is like this
My view is like this :
<div class="form-group">
<div class="col-sm-10">
<ul class="list-inline list-photo">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" >
...
</li>
#endforeach
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</div>
</ul>
</div>
</div>
I want to add div before #for like this :
<div id="test">
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
...
</li>
...
#endfor
</div>
When I add div, the view becomes not tidy
I need to add div. So I want to call it from javascript
How can I solve the problem?

try to use span because div has a line break compare to span or another option is to use css to suite your needs

The reason your view "becomes not tidy", as you put it, is because you are producing invalid HTML. The only valid child of <ul> is an <li> element. You therefore have two choices, either use multiple lists and add a class/ID to each one, like this:
<ul class="list-inline list-photo thumbnail-view">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" >
...
</li>
#endforeach
</ul>
<ul class="list-inline list-photo thumbnail-upload">
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</ul>
Or you can apply a class to specific row(s) you want to select with JavaScript or CSS if you want to style them differently:
<ul class="list-inline list-photo">
#foreach($product->photos as $i => $photo)
<li id="thumbnail-view-{{$i}}" class="thumbnail-view">
...
</li>
#endforeach
#for($i = count($product->photos); $i < 5; $i++)
<li id="thumbnail-upload-li-{{$i}}" class="thumbnail-upload">
<a href="javascript:" class="thumbnail thumbnail-upload" id="thumbnail-view-{{$i}}">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
...
#endfor
</ul>

Related

create a const for each item of an array in jquery

I'm trying to create a const or a var for each array item using jQuery, below is my HTML
<div class="taxonomy-list">
<input type="hidden" id="filters-category">
<ul class="category-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="uncategorized" data-taxtype="category"
data-id="1">
Category </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
<input type="hidden" id="filters-post_tag">
<ul class="post_tag-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="tag-1" data-taxtype="post_tag"
data-id="3">
Tag 1 </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
</div>
and below is the js I'm trying to use
$('.taxonomy-list input').each(function(index, value) {
const tax_name = [jQuery('.taxonomy-list input')]
for (let i = 0; i < tax_name.length; i++) {
console.log(`tax-${index}: ${this.id}`);
}
});
What I'm willing to get is in below format
const tax_0 = jQuery('#filters-category').val().split(',');
const tax_1 = jQuery('#filters-post_tag').val().split(',');
there will be more tax-i coming up, so I need to create a new const for each of them

CSS / JS tabs not respoding on click

I am having troubles with a a navigation (structured with tabs) that is not working on this page. but works properly instead on this page using exactly the same way to include it.
On click on "Norway" on top left the navigation opens but is not possible to switch on the tabs "Americas, South Africa" etc.)
This is the phpi'm using to include it:
<div class="outlet__box">
<div class="outlet__box_content">
<?php include '../../menu.php'; ?>
</div>
</div>
The htmlof the navigation is this instead:
<ul class="tabs">
<li class="active">
<span class="h2 tabs__headline trigger-select-tab">Europe
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Americas
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Middle East and Africa
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Asia and Oceanic
<span class="caret visible-xs"></span>
</span>
</li>
</ul>
Is the problem related to js? (I checked the console and i see no errors).
Any tips?
Thanks in advance
Put this code for your navigation, and you're all set...
$('#language-outlet-wrapper .outlet .tabs>li').click(function(index){
var ind = $('#language-outlet-wrapper .outlet .tabs>li').index(this);
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().parent().find('ul.tab_content>li').each(function(index){
if(ind == index){
$(this).addClass('active').siblings().removeClass('active');
}
});
});

jquery page counter, pagination

I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">ยท</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.

Jquery event.preventDefault() not working

I want my menu to show and hide list items on click by default they are hide. The problem is my menu is generated in admin section so it auto assigns url of website to it if i set URL field of particular link to null in menu options. so when i click it reloads home page.
What i want is that when i click any parent li it should stop generating default event so used prevent default. but in my case it is not working and it reloads the page after showing list items of there parent.
Here is a fiddle
Fiddle
Html
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Burlington Mall, MA</span>
</li>
<li class=" "><span class="menu-title">Burlington Mall, MA - Cart</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Brunswick Square Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Garden State Plaza, NJ</span>
</li>
<li class=" "><span class="menu-title">Menlo Park Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Ocean County Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Rockaway Townsquare, NJ</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Galleria at White Plains, NY</span>
</li>
<li class=" "><span class="menu-title">Manhattan, NY-Toys 'R' Us </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">CrabTree Valley, NC</span>
</li>
<li class=" "><span class="menu-title">Fayetteville, NC</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}
Here is a working example: http://jsfiddle.net/hk1w89zw/
Not sure what you were trying to acheive with the id prop. In general it's better to set the onClick event on a link (<a>-tag) instead of the li. and use following jQuery code:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});
maybe you want something like this
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});
Catch the event when its trigger out
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}
I have to admit that I got your code wrong.
Here is a https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin).
First you don't have a list with the id "#li_menu169". Add it to the ul element
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
Later on you're showing and hiding the same elements which is a bit confusing. Therefore I would recommend hiding all inner elements first and than showing the inner elements of "this" stuff.
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
Within the JSbin it is working as you expect.

How to select the element in javascript?

the dom as the following:
<li class="category51">
<a class="drop" href="#">Data</a>
<div class="dropdown_2column align_left ">
<div class="col_1">
<ul>
<li class="level1">
<a href="#">
<span class="level1">Solutions1</span>
</a>
</li>
<li class="level1">
<a href="#">
<span class="level1">Solutions</span>
</a>
</li>
</ul>
</div>
</div>
</li>
i want to get Solutions1 and Solutions a lable. how should i do?i using:
var link = document.getElementsByClassName("category51").document.getElementsByTagName(ul).document.getElementsByTagName(li).document.getElementsByTagName(a).
what i want to achieve:
i want to disable the link by javascript.so i must bind an event to the a lable, now, i don't know how to locate it.
You could use Document.querySelecorAll.
var eles = document.querySelectorAll('li.level1 a'),
i;
for (i = 0; i < eles.length, i++) {
eles[i].onclick = function() {
//...
};
}

Categories