Can somebody please tell me why this script is not working? It is supposed to work, but it doesn't, I am getting the id correctly, but Divs are not displaying properly. My idea is to display one div based on the click, and hide the other Divs.
Script
$(document).ready(function() {
$("a").live("click", function(){
var idV = $(this).attr("id");
alert(idV);
$("#"+idV+"div").css("display","block");
return false;
});
});
HTML
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div id="solution1" style="display:none;">Solution 1</div>
<div id="solution2" style="display:none;">Solution 2</div>
<div id="solution3" style="display:none;">Solution 3</div>
<div id="solution4" style="display:none;">Solution 4</div>
Your div ids are wrong.
Try:
<div id="solution1div" style="display:none;">Solution 1</div>
instead of
<div id="solution1" style="display:none;">Solution 1</div>
Edit:
JSBIN: Preview
JSBIN: Source Code
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div>
<div id="solution1div" style="display:none;">Solution 1</div>
<div id="solution2div" style="display:none;">Solution 2</div>
<div id="solution3div" style="display:none;">Solution 3</div>
<div id="solution4div" style="display:none;">Solution 4</div>
</div>
jquery:
$("a").live("click", function(){
var idV = $(this).attr("id");
$("#"+idV+"div").siblings().hide();
$("#"+idV+"div").show();
return false;
});
mmmm the error is actually there man..
see:
$("#"+idV+".div").css("display","block");
change it to:
$("div#"+idV).css("display","block");
You're reusing ID attributes. IDs need to be unique to a document.
You can't have anchors and divs with the same ID.
Related
I have the next code:
<div class="components_container">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
And I would like to wrap both groups in different div tags, like this:
<div class="components_container">
<div class="group1">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
</div>
<div class="group2">
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
</div>
To do what you are trying to accomplish, you can do this in pure javascript:
Get a reference to the container (this code implies that you have only one element with that class):
var container = document.querySelector(".components_container");
Create the two external divs, add the classes and append them to the container:
var first_cont = document.createElement("div");
var second_cont = document.createElement("div");
first_cont.classList.add("group1");
second_cont.classList.add("group2");
container.appendChild(first_cont);
container.appendChild(second_cont);
Get the divs with a specific class and change their parent (remove child / append child):
var first_elements = container.querySelectorAll(".first_group");
var second_elements = container.querySelectorAll(".second_group");
for (el of first_elements) {
container.removeChild(el);
first_cont.appendChild(el);
}
for (el of second_elements) {
container.removeChild(el);
second_cont.appendChild(el);
}
This will do what you want, but please, next time try to add some more information, like some context, the steps that you tried or where are you finding difficulties :)
So I am using an ad blocker which detects if a user has AdBlocker turned on on there web browser. If an Ad Blocker is detected then I would like to remove the 4th .owl-item class and replace it with my own code.
So currently I am using:
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();
and replacing it with
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");
The Html code is:
<div class="owl-wrapper">
<div class="owl-item">Item 1</div>
<div class="owl-item">Item 2</div>
<div class="owl-item">Item 3</div>
<div class="owl-item">Item 4</div> //Remove this item
<div class="owl-item">Item 5</div>
</div>
I would like the final outcome to look like this:
<div class="owl-wrapper">
<div class="owl-item">Item 1</div>
<div class="owl-item">Item 2</div>
<div class="owl-item">Item 3</div>
<div class="panel-display">
<div class="panel_content">
We noticed that you are using an ad blocker.
</div>
</div>
<div class="owl-item">Item 5</div>
</div>
The current code that I am using is giving me unexpected results. For some reason I have to refresh my browser for code changes to take place. I'm not sure if I am going about this correctly. I've been banging my head against the wall on this issue for a while. I am sure there is a better way to handle this.
My full code is below for reference.
jQuery(document).ready( function($) {
$('.icon.icon-arrow-right').one("click", function(){
function adBlockDetected() {
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker</div></div>");
}
function adBlockNotDetected() {
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.setOption({ debug: true });
blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
}
function checkAgain() {
$('#block-adb-enabled').hide();
$('#block-adb-not-enabled').hide();
// setTimeout 300ms for the recheck is visible when you click on the button
setTimeout(function() {
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
blockAdBlock.check();
}
}, 300);
}
});
});
How do you remove the 4th div tag and replace it with your own content using JQuery?
Amusingly, you use replaceWith (not remove then append):
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").replaceWith("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");
// -----------------------------------------------------^
Example:
$("#btn").click(function() {
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").replaceWith("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");
});
<input type="button" id="btn" value="Do Replace">
<div class="single-gallery">
<div class="owl-wrapper">
<div class="owl-item">Item 1</div>
<div class="owl-item">Item 2</div>
<div class="owl-item">Item 3</div>
<div class="owl-item">Item 4 (to be replaced)</div>
<div class="owl-item">Item 5</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use replaceWith() in the $(document).ready function
http://jsfiddle.net/rf3esr4o/
I have four div of same class, but I want to access each div when clicked only by class name for any further action only by java script/Jquery
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
Try using jquery class selector with on click handler
$(function() {
$('.myclass').on('click', function() {
alert($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">something</div>
<div class="myclass">something 2</div>
<div class="myclass">something 4</div>
<div class="myclass">something 3</div>
You can use the following jquery:
$(".myclass").click(function(e)
{
var div = this;
});
Hi im new on jquery and nowhere in javascript but anyway im trying to create this carousel where you can click any item from the list and show more infos about that item on the left div.
Here is the preview:
I've already created the carousel on the right part but im stuck on what to use for displaying the left part when specific item is selected can i do it with any jquery plugin or do i need to deep dive in javascript?
You can use the following example
HMTL
<div id="slidercontent">
<div>Details 1</div>
<div>Details 2</div>
<div>Details 3</div>
</div>
<div id="pager">
<div>pager 1</div>
<div>pager 2</div>
<div>pager 3</div>
</div>
Jquery
//Hidding the slidercontent
$('#slidercontent div').hide();
//Displaying first slidercontent
$('#slidercontent div').eq(0).show();
$('#pager div').click(function(){
var idx = $(this).index();
$('#slidercontent div').hide().eq( idx ).fadeTo(500, 1);
$('#pager div').removeClass('active');
$(this).addClass('active');
});
Let's say you have:
<div id="carousel">
<div id="details">
<div>Details 1</div>
<div>Details 2</div>
<div>Details 3</div>
</div>
<div id="info">
<div>info 1</div>
<div>info 2</div>
<div>info 3</div>
</div>
</div>
LIVE DEMO
var $det = $('#details > div');
$det.eq(0).show();
$('#info > div').click(function(){
var idx = $(this).index();
$det.hide().eq( idx ).fadeTo(500, 1);
});
Bind a click event to the carousel list item, on click, fire an ajax call to your server and retrieve the html or json and display it in the left div.
something like this might work
$("#carousel > li").click(function() {
alert($(this).attr("value"));
//$.post("url.html", { fruit: $(this).attr("value") }, function(data) {
// $("#left").html("<span>" + $(this).attr("value") + "</span>" + data);
//}
});
jsfiddler
I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
...
<div class="mydata">data 20</div>
</div>
What I want to do is only display 5 results at a time, and should the user wish to see more, they can click a show next 5 or show more button (or something similar). Any ideas?
Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.
You can use the gt() and lt() selectors along with :visible pretty well here.
The following will show the next 5 results on clicking and removes the link once all items are visible.
$('.mydata:gt(4)').hide().last().after(
$('<a />').attr('href','#').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(5)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) $(a).remove();
}); return false;
})
);
working example: http://jsfiddle.net/niklasvh/nTv7D/
Regardless of what other people are suggesting here, I would not hide the elements using CSS, but do it in JS instead, because if a user has JS disabled and you hide the elements using CSS, he won't get them visible. However, if he has JS disabled, they will never get hidden, nor will that button appear etc, so it has a full noscript fallback in place + search engines don't like hidden content (but they won't know its hidden if you do it on DOM load).
My solution is here: jsFiddle.
You can put this link somewhere:
show more
and use the following code:
var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery('#results-show-more').hide();
};
jQuery('#results-show-more').bind('click', function(event){
event.preventDefault();
limit += per_page;
jQuery('#results > div.mydata:lt('+(limit)+')').show();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery(this).hide();
}
});
where limit is your current number of results displayed and per_page is number of results shown with each click on "show more". The link disappears if all the results are displayed. See how it works on jsFiddle.
You can create a CSS class like:
.hiddenData { display: none }
and attach it to any quantity of divs that exceeds 5.
After that make handlers for adding/deleting this class from the needed quantity of divs.
jQuery for class removing:
$(".hiddenData").removeClass("hiddenData")
Create a class with something like:
.hidden_class{
display: none;
}
Add this class to all the mydata div's that you dont want seen.
when the user click the button, remove it from the next 5 div's.
repeat everytime the user clicks the "read more" button
This should work...Let me know how it goes
<script type="text/javascript">
function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
</div>
<div style="clear:both" onclick="ShowHide('grp11')">More</div>
<div id="grp11" style="display:none">
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
<div class="mydata">data 13</div>
<div class="mydata">data 14</div>
<div class="mydata">data 15</div>
</div>
</div>
In your forloop, you also have to add these divs hidden container
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
You get the idea.
Here you have:
<style>
/*This hides all items initially*/
.mydata{
display: none;
}
</style>
Now the script
<script>
var currentPage = 1; //Global var that stores the current page
var itemsPerPage = 5;
//This function shows a specific 'page'
function showPage(page){
$("#results .mydata").each(function(i, elem){
if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
$(this).show();
else
$(this).hide();
});
$("#currentPage").text(currentPage);
}
$(document).ready(function(){
showPage(currentPage);
$("#next").click(function(){
showPage(++currentPage);
});
$("#prev").click(function(){
showPage(--currentPage);
});
});
</script>
And a sample html:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
</div>
Previous
<span id="currentPage"></span>
Next
The only thing remaining is to validate fot not going to a page lower than 1 and higher than the total. But that will be easy.
EDIT: Here you have it running: http://jsfiddle.net/U8Q4Z/
Hope this helps. Cheers.