Hello I am trying to change input selection to link selection which will be hiding and showing div layers. It looks like my selector is not working correctly since when I select something nothing is happening. Any help how I can resolve this situation are welcome. Here is my code
HTML:
<li><a class="btn-default" id="Section1" name="options-doc">link 1</a></li>
<li><a class="btn-default" id="Section2" name="options-doc">link 2</a></li>
<div class="types" data-period='Section1'></div>
<div class="types" data-period='Section2'></div>
SCRIPT:
$(document).ready(function() {
$(".btn-default").click(function(){
var test = $(this).find("a[name$='options-doc']").id();
$(".types").hide();
$(".types[data-period='" + test + "']").show();
});
});
.id() is not a method in jQuery(or javascript for that matter).
Also, in this case, do not use find() as this is the clicked anchor itself
Try using attr()
var test = $(this).attr('id');
Related
I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.
I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).
Code for text menu:
<ul>
<li class="page_item">
Test 1
</li>
<li class="page_item">
Test 2
</li>
</ul>
Code for Pictures menu:
<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
</div>
Screen shot with Picture and text menu:
Screen shot with Picture and text menu
I will be grateful for any help!
Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don’t even have ideas on how to do this.
All thanks in advance for any help!
If you like for this behaviour you can do this
hover: nav1 > imageNav1 ect...
You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter
$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});
.image-list__item--selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>
Here's a solution with pure js, works for elements that are not parents using ids.
html
<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>
and heres the js
function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}
there are many solutions , with an without using libraries. I think you may use some jquery if possible , and if not you should search for addeventlistener (the advanced way)
https://api.jquery.com/hover/
is a good example of doing what you are trying todo .
var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});
The above part is for php , still can be used in a plugin.
If you are in wordpress environment , you have to dig into how to write wp plugins also. Trying to achieve this in an environment , and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.
I have the following code structure. Its a set of wordpress tabs. I have many tabs all over the website, using Jquery i want to trigger a function when a user clicks one of the links, however i cant apply a ID atribute so my funtion below doesnt work...any suggestions?
JQUERY
$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
HTML
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span></li>
</ul>
You can't select them by ID because they don't have IDs. But you can use CSS Atrribute-Equal Selector to get them by href attribute. Like this:
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
// ...
}
More CSS Selectors here.
Working code snippet:
$('[href = "#1485856532455-70ee0dfe"]').click(function() {
alert("#1485856532455-70ee0dfe was clicked! Hoooray!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span>
</a>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
</ul>
Use attribute selector then :
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
$('#1485856532455-70ee0dfe').on('click', function() { - means that on page we have some element with id 1485856532455-70ee0dfe. In your html code no id with text 1485856532455-70ee0dfe, thats why your code not work.
You have two case to fix:
add id's to needed element
change js to $('[href="1485856532455-70ee0dfe"]').on('click', function() {
You cant give a id to a link like that. However you can select the link with jquery by doing $('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})
I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.
I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:
I want to make a onmouseover on a tag to change the class closed to open in other element. Example:
Link
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
If you include jQuery:
Add id for your elements:
Link
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
You can use Link
And JS:
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/
This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;
<script>
function changeUl() {
// Get the first found UL, anywhere in the body
document.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
Link
With ID
<script>
function changeUl() {
var wrapper = document.getElementById('wrapper');
wrapper.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
<div id="wrapper">
Link
</div>
You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.
I am trying to make a button bar that changes an attr of a defined object but cannot get it to work. See below code snippets (CSS Not included):
Button Bar Code
<ul id="filtering-nav">
<li class="work button active" value="../servlet/Web">Work</li>
<li class="like button" value="../servlet/Home">home</li></ul>
Script Code
<script> var buttons = $("#filtering-nav .button"); buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$( "#alpha100" ).attr("data", $("#filtering-nav .button.selected").val() );});</script>
Target Object Code
<object id='alpha100' type="text/html" data="" width="100%" height="100%"></object>
Does anyone know what I am doing wrong here?
I can get something similar to work with a drop down box.
You seem to want .button.active instead of .button.selected.
But you can make your code simpler :
var buttons = $("#filtering-nav .button");
buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$("#alpha100" ).attr("data", $(this).attr('value'));
});
Note that today custom attributes should be named data-something. data and value aren't good attribute names. Using standard custom data attributes, you'd use the specific data function :
$("#alpha100" ).data("something", $(this).data('otherthing'));
I don't know what is happening behind the scenes when you try to use value for a li tag. That might be part of the problem so I suggest you this approach (using data attribute)
HTML
<ul id="filtering-nav">
<li class="work button active" data-value="../servlet/Web">Work</li>
<li class="like button" data-value="../servlet/Home">home</li>
</ul>
JS
<script>
var buttons = $("#filtering-nav .button"); buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$( "#alpha100" ).attr("data", $("#filtering-nav .button.selected").data('value') );});
</script>
Something else (as dystroy pointed out): did you mean .button.active instead of .button.selected?