So I have a tabbed menu with an arrow below that should move when I click on a specific tab.I am using pure JavaScript for the tabs and jQuery to move the arrow. The problem is that this works only when I delete one of the scripts. If I delete the jQuery script, the tabs are working and viceversa. Has anyone any idea what the problem may be? Here is the HTML
<div class="item active">
<ul class="tabbed-menu menu-list">
<li>Consultanță IT</li>
<li>Managementul Relațiilor cu Clienții</li>
<li>Business Intelligence</li>
<li>Turism și Ospitalitate</li>
<li>Finanțe și Bănci</li>
<li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
</ul>
</div> <!--/.item active-->
<div class="item">
<ul class="tabbed-menu menu-list">
<li><a class="left carousel-control" href="#services-carousel" role="button" data-slide="prev"><img src="images/left-arrow.png" alt="">Inapoi</a></li>
<li>Educatie</li>
<li>eCommerce</li>
<li>eLearning</li>
<li>Website</li>
<li>mCommerce</li>
</ul>
</div> <!--/.item-->`
Javascript
function rudrSwitchTab(rudr_tab_id, rudr_tab_content) {
// first of all we get all tab content blocks
var x = document.getElementsByClassName("tabcontent");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'; // hide all tab content
}
document.getElementById(rudr_tab_content).style.display = 'block'; // display the content of the tab we need
// now we get all tab menu items by class names (use the next code only if you need to highlight current tab)
var x = document.getElementsByClassName("tabmenu");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = 'tabmenu';
}
document.getElementById(rudr_tab_id).className = 'tabmenu active';
}
and jQ
$(document).ready(function(){
$('ul.menu-list li' ).click(function(event) {
var position = $(this).position();
var width = Math.round($(this).width()/2) - 5;
// alert(width);
$(".arrow-marker").css('left', 'auto').stop().transition({ x: position.left + width });
event.preventDefault();
})
})
Has anyone any idea what the problem may be?
You are using event.preventDefault(); in your jQuery which basically prevents the link to follow its href. So the javascript you have put in your links' href will not be executed - this is exactly what event.preventDefault(); is supposed to prevent. Sort of a name that fits :)
First please check error in console. If it is jquery conflict error.
Use these below line before start the jquery code.
$.noConflict();
Try to use the Jquery no conflict
https://api.jquery.com/jquery.noconflict/
see here to catch info of this function
<ul class="tabbed-menu menu-list">
<li>Consultanță IT</li>
<li>Managementul Relațiilor cu Clienții</li>
<li>Business Intelligence</li>
<li>Turism și Ospitalitate</li>
<li>Finanțe și Bănci</li>
<li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
</ul>
I made these changes
rudrSwitchTab($(this).attr('id'), $(this).attr('tab-id'));
event.preventDefault();
And now it all works
Related
I have a page that sorts things if you choose one of the options. The list of filters was too long so I added a div that shows/hides options. On page load some of the options are hidden via CSS with display: hidden. Code below just changes display from display: none to display: inline-block based on number of clicks.
var timesClicked = 0;
window.onload = function(){
document.getElementById("filter_attribute_217").onclick = function(){
timesClicked++;
if (timesClicked%2==0){
hide();
} else {
show();
}
};
This is show() function
function show(){
document.getElementById("filter_attribute_69").style.display="inline-block";
document.getElementById("filter_attribute_70").style.display="inline-block";
document.getElementById("filter_attribute_72").style.display="inline-block";
//all those other options
document.getElementById("filter_attribute_217").innerHTML = "less";
document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6";
document.getElementById("filter_attribute_68").style.borderBottom = "none";
document.getElementById("filter_attribute_87").style.borderBottom = "none";
}
And this is hide() function
function hide(){
document.getElementById("filter_attribute_217").innerHTML = "more";
document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6"
document.getElementById("filter_attribute_69").style.display="none";
document.getElementById("filter_attribute_70").style.display="none";
//all those other options
document.getElementById("filter_attribute_103").style.display="none";
}
This is working perfectly until I choose one of the options which means that some other disappear. Then when trying to use more/less button I will get errors like this one:
Uncaught TypeError: Cannot read properties of null (reading 'style')
at hide (user.js?sci=481:68:50)
at document.getElementById.onclick (user.js?sci=481:58:9)
Clicking it again shows the same error just with show() function.
I've tried checking if element exist in DOM structure with document.body.contains(YOUR_ELEMENT_HERE); but it always shows that all of the options exists. Checked it with
if(document.body.contains(element){
console.log("exists")
} else {
console.log("doesn't exist")
}
Console was always outputting "exists".
I then tried just ignoring the problem to see if others options will show with
function stoperror() {
return true;
};
window.onerror = stoperror;
But with the same result just without the error. I don't know why this is happening and how can I fix it. I need to add that all I can edit here is JavaScript and CSS. That's why I made another option (filter_attribute_217) and made it into my show more/less button.
Edit
Here's HTML code for basically every option. They only thing that is changing from option to option is id and href.
<div data-limit="3" class="group group-filter" id="filter_attribute_104">
<h5>
Transparent
</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="/pl/c/Balls/119/1/default/1/f_at_104_0/1">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(56)</em>
</a>
</li>
</ul>
<div data-limit="3" class="group group-filter" id="filter_attribute_68">
<h5>
White
</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="/pl/c/Balls/119/1/default/1/f_at_68_0/1">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(208)</em>
</a>
</li>
</ul>
I also have this in my JS code
window.addEventListener("DOMContentLoaded",(event) => {
document.getElementById("filter_attribute_217").innerHTML = "więcej";
document.getElementById("filter_attribute_217").style.borderTop = "1px dashed #e1e4e6";
});
This is an example with the code you provided. However your question is still not properly stated. I assume the HTML is getting generated dynamically? If so, I would make sure that the elements I'm trying to use are existing for sure while I call my JS. So I got rid of the window.onload you are using. Also, if you want to apply global changes, do not repeat the same things for each ID, just use a querySelectorAll('.classname') with a .forEach. Example:
let timesClicked = 0;
let show = () => {
document.querySelector('.group-filter').innerHTML = 'LESS';
document.querySelectorAll('.group-filter').forEach(elem => {
elem.style.display = 'flex';
// Other things...
});
}
let hide = () => {
document.querySelector('.group-filter').innerHTML = 'MORE';
document.querySelectorAll('.group-filter').forEach(elem => {
elem.style.display = 'none';
// Other things...
});
// Restore the first element's display
document.querySelector('.group-filter').style.display = 'flex';
}
document.getElementById('filter_attribute_104').addEventListener('click', () => {
timesClicked++;
if (timesClicked % 2 == 0) hide();
else show();
});
.hidden {display:none;}
<div data-limit="3" class="group group-filter" id="filter_attribute_104">
<h5>Transparent</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="#">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(56)</em>
</a>
</li>
</ul>
</div>
<div data-limit="3" class="group group-filter hidden" id="filter_attribute_68">
<h5>White</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="#">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(208)</em>
</a>
</li>
</ul>
</div>
<div data-limit="3" class="group group-filter hidden" id="filter_attribute_168">
<h5>Red</h5>
<ul>
<li class="" style="margin-right:15px;">
<a title="tak" href="#">
<i src="/libraries/images/1px.gif" alt="" class="px1" ></i>
<span>tak </span>
<em>(332)</em>
</a>
</li>
</ul>
</div>
I have a tab. where data comes with dynamically. now i set a condition with jquery.
if we have more then 6 this controll will display normally. if we set equal 6 or bellow.
this control will hide.
as this tab only show 6 and if i add more then 6 this control will appear in front. otherwise this will hide.
<div id="info-nav-container">
<ul class="info-nav">
<?php $counter=1 ; foreach ( $atts[ 'info_models'] as $tab ) : ?> //loop will be here
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="info-nav-control ">
<a class="info-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="info-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a> </div>
</div>
Here is the jQuery Which i tried to hide
if ($('.vehicle-nav li').find('li').length <= 6) {
find('.vehicle-nav-control').hide();
}
Your JS code is throwing errors in console.
find('.vehicle-nav-control') must be appended to jQuery object.
=> operator must be replaced with >= (source).
JS code must be in dom ready function.
You never open <li> tag.
Selector $('.vehicle-nav li').find('li') will not find any items.
$(document).ready(function(){
var lists = $('.vehicle-nav li');
if (lists.length <= 6) {
$('.vehicle-nav-control').hide();
}
});
Alright so I've been messing around with this for 2 days and can't figure it out for the life of me. Basically I have dynamically generated <li> entries appending to a static <ul>, and then calling the .listview('refresh',true) function afterwards.
The first generation is fine, the second generation screws up the padding on the already listed elements, but shows the newly listed elements just fine.
I also have a "show more" button that retrieves these dynamically generated entries, and then updates itself to reflect a new offset. So here is the code.
HTML:
<div data-role="page" id="librarysearch" data-theme="a">
<div data-role="header" data-position="inline"></div>
<div data-role="content">
<div>
Finished
Playlist
<input id="librarysearchinput" size="60" onkeypress="if (event.keyCode == 13) applib.searchlibraryservers();" type="search" />
<a href="javascript:applib.searchlibraryservers();" data-icon="search" data-inline="true" data-role=button>Search</a>
<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>
</div>
</div>
<div data-role="footer" data-position="inline">
</div>
Initial Generation of list elements:
this.searchlibraryservers = function(offset)
{
window.$("#librarysearchinput").blur();
var query = window.$("#librarysearchinput").val();
if (query !== "")
{
if (sonicservers.length > 0)
{
if (!libraryisdynamic)
libraryserverid = selectedsonicserverid;
remoteapp.searchserver(libraryserverid, query + "*", {songCount: 51}, function(results)
{
var htmlout = "";
var buttonhtml = "";
if (results && results.success)
{
var i;
librarysearchresults = results.response;
htmlout += "<li data-role=\"list-divider\">Artists</li>";
for (i in librarysearchresults.artists)
htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
if (countProperties(librarysearchresults.artists) > 1) // just set to 1 for testing
buttonhtml += "Show More";
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
window.$("#showmoreartists").html(buttonhtml).trigger('create');
}
});
}
}
};
This generates the following html:
<li data-role=\"list-divider\">Artists</li>
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
And for the button:
Show More
This all seems fine, and in fact shows up fine, but when I click show more it basically does the same thing as the initial result except taking the offset into account:
this.showmoreartists = function(query, offset)
{
var htmlout = "";
var buttonhtml = "";
remoteapp.searchserver(selectedsonicserverid, query + "*", {artistOffset: offset}, function(results)
{
librarysearchresults = results.response;
for (var i in librarysearchresults.artists)
htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
if (countProperties(librarysearchresults.artists) > 1) //just set to 1 for testing
{
buttonhtml += "Show More";
}
else
{
window.$("#showmorebutton").hide();
}
window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
});
};
The newly generated html that it appends to "libraryartistresults" seems fine, (the results are the same due to the testing setup, it should be a moot point for this problem though since the listview shouldn't care about it being the same.
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
The button html looks fine too:
Show More
I've even tried using the "style="white-space:normal;" in the UL.
TL:DR here's the code I believe to have the most relevance
STATIC HTML:
<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>
HTML UPDATE:
window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);
GENERATED HTML SAMPLE:
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>
It's probably some simple oversight but at this point I'm stuck. I'll keep digging around, maybe the append is placing the <li> after the </ul>
And thanks for reading this if you did, it was a long post I know and I appreciate you taking the time to just get through it all.
Well I'll be damned...the answer was extremely simple:
Change window.$("#libraryartistresults").listview('refresh', true);
to: window.$("#libraryartistresults").listview('refresh');
So...not sure if it's due to jQM 1.2, or some weird stuff going on with my framework or something but it fixed it 100%.
I'd like to give a special thanks to ezanker for taking his time to analyze and write up a JSFiddle example for me to work with.
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I have the following markup :
<div class="tutor-photo-slider">
<ul>
<li><a class="left-arrow" href="javascript:;"></a></li>
<li>
<ul id="carousel">
<li>
<a href="/assets/images/tutor-sample.png" class="slider-image">
<img src="/assets/images/tutor-sample-thumb.png" /></a>
</li>
</ul>
</li>
<li>
<a class="right-arrow" href="javascript:;"></a>
</li>
</ul>
</div>
when I do
$('.left-arrow').click(function() {
var elem = $(this).parents('ul').children('li').children('ul'),
children = elem.children('li');
for (var i = 0; i < children.length; i++) {
if ($(children[i]).css('display') != 'none') {
break;
}
}
$(children[i - 1]).show();
});
it doesn't access it.I tried debugging it in firebug but could not figure out the error.
I am including jquery 1.6.4. And I do not have errors.
edit: I am trying to make a carousel photo gallery http://jsfiddle.net/5xHFT/1/
Your code snippet is missing an
);
As in, instead of
$('.left-arrow').click(function() {}
do ...
$('.left-arrow').click(function() {} );
That can cause the error.
click function missing the closing brackets. here is working code.
as mentioned in the comment by Guffa, you probably are not doing this inside ready. Here is a fiddle to show you: http://jsfiddle.net/AVGTL/
after looking at the other fiddle, it is really just the missing )
try
jQuery('.left-arrow').click(function() {} );
some times using some plug-ins make some conflicts so just try to use jQuery instead of "$"
Seems okay with snippet which you have provided: http://jsfiddle.net/8zgqF/1/. Specify your question.