Hello im looking to show a div based on page content. Its will go on a dynamically generated shop page. I need a notice to display upon a specific item being in the cart - eg if someone has a 'toy frog' in their cart the 'frog promo.div' needs to show.
I have been trying to adapt the following script/html for usage
any help appreciated. Dave
<div class="contactUs"?>contact</div>
<div class="hideThis"?>xxx</div>
<script type="text/javascript">
if (jQuery("div.contactUs:contains('toy frog')").length) {
jQuery(".hideThis").css("display","none");
}
</script>
============================================================
Thanks all for help so far.. I know nothing about JS!
I dont think I have been clear reading through/trying all this..
What i am trying to acheve is
1**. when a product with the word 'subscrtiption' is added to my shopping cart I need a html message to show.**
I tried a few of the examples that seem to work on jsfiddle, but not on my server.. is that common?
cheers all..again
I don't understand your code sample (in relation with your problem description: cart content with product to show a promo div), but I made a small code to answer your problem.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!-- Into your page HTML, Imagine you have two parts -->
<!-- The first one is the cart that contain the item the user want to buy -->
<div class="cart">
*Cart*
<div class="sausages">sausages</div>
<!-- Try to remove comment of code following -->
<!-- <div class="fries">fries</div> -->
</div>
<br/>
<br/>
<!-- The second one is the content page that contain the div you want to display according to item into your cart -->
<div class="content">
*Content*
<div class="sausages" style="display:none">sausages</div>
<div class="fries" style="display:none">fries</div>
</div>
</body>
</html>
JS
var $content = $('.content');
var $cart = $('.cart');
// for each children element (el) into my div cart
$cart.children().each(function(index, el) {
// I try to find a element with my className into my div Content
// And if I find it Then I show it
$content.find('.' + el.className).show();
});
I have updated my code with comments to be clearer
You can use is()
if( $('.contactUs').is(':empty') ) {
// ...
Or you could just test the length property to see if one was found:
if( $('.contactUs:empty').length ) {
// ...
Keep in mind that empty means no what space either. If there's a chance that there will be white space, then you can use $.trim() and check for the length of the content.
if( !$.trim( $('.contactUs').html() ).length ) {
// ...
var contactDivText = $('.contactUs').text();
var hideDiv = $('.hideThis');
if(contactDivText == ''){
hideDiv.hide();
}else{
hideDiv.text(contactDivText);
}
Related
I'm fairly new to Javascript and Jquery. My current project is a very simple tasklist. My html has an input, a button and an ul. I created an function on js that creates a li item inside the ul everytime the user writes something on the input and clicks on the button. Said li, includes an edit button.
What I'm trying to do now is: make an event so, when the "edit" button is clicked, an input is created on which I can rewrite my message. Right now, the problem I'm having is that I'm stuck on trying to create the input. I'm trying to use the following code:
function Edit() {
$('.edit').on('click', function() {
//this line assigns an event on buttons with class:"edit"
var data = $(this).attr("data-id")
//this var returns the data-id value of the specific button I pressed
var container = $("#d"+data)
//this brings me the div that contains, among other things, the "edit" button.
var input = '<input type="text">';
//creates an input
container.append(input)
//apends the input to the div`
});
}
My problem right now is: this works if I have just one element created on my tasklist, if I have more than one, it creates as many inputs as elements are on the ul at that time for the first one, and then starts substracting one on the subsequent ones.
I have been thinking about this for hours, and I can't seem to grasp the reason why this happens, so I'd really appreciate some input so I can understand what's going on and solve it.
Thanks a lot!!!
Edited to add the html:
my html is the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Mi lista de tareas</title>
</head>
<body>
<div class="container">
<h1>Mi lista de tareas</h1>
<div id="ingreso">
<div id="input-boton">
<input type="text" id="inputId"/>
<button id="agregar">Agregar</button>
</div>
<ul id="lista">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/toDoList.js"></script>
</body>
</html>
The "agregar" button creates a node like this:
`<div id=(assigned by a counter)>
<li>
<div>
<edit button>
<delete button>
</div>
</li>
</div`
Thanks!!!
Sorry for the incredibly lame question, but as a brand new programmer all the answers I've found while searching all day are for other problems not specific to me so I decided I'd post about it.
I have taken it upon myself to convert a sample "Random Quote Generator" program I found into a small web based app that can produce random links at the touch of a button, but as I soon found out just replacing the example quotes with the links of my choice only produced normal un-clickable text.
I have tried many things relating to messing with the div's and the id tags but nothing works for me.
My code for the html is as follows:
<html>
<head>
<title>Simpsons Episode Generator</title>
</head>
<body>
<h1>Simpsons Episode Generator</h1><br>
<img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
<!-- javascript declared -->
<script src="javascript.js"></script>
</body>
</html>
So as you can see, it just calls the javascript to run the randomiser then prints the result.
The javascript is as follows:
//Links To Episodes
var links = [
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = Math.floor(Math.random() * (links.length));
document.getElementById('linkDisplay').innerHTML = links[randomLink];
}
All i want is to just make the click the HTML is receiving after the button is pressed to be clickable.
Thanks for reading and sorry for asking such a simple sounding question but i really have been looking all day how to do it by myself...
If you want to navigate to that URL, you don't need to "click the link", you can just change the location of the window:
window.location.href = links[randomLink];
If you want to make a link to that location, so people can click it, make that <div> an <a>
<a id="linkDisplay" href='#' />
(the # means it will just go to the top of the page) and then update the href as needed:
document.getElementById('linkDisplay').href = links[randomLink];
You need to inject an anchor tag into the HTML to allow users to be able to click on a random link
//Links To Episodes
var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',]
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = links[Math.floor(Math.random() * (links.length))];
document.getElementById('linkDisplay').innerHTML = ''+randomLink+'';
}
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
long time reader first time asker....
If I have a textarea with html text in it (I am trying to verify certain elements have an id) and I send that code to a function how do i update that textarea with the new changes?
I have tried wrapping it in a div from previous suggestions I read here, but its not showing me the updated html.
Here is my fiddle https://jsfiddle.net/gk6yLh77/
function runfunc(){
var uniqueIdFind = '<div>'+jQuery('#pages_htmlcode_content').val()+'</div>';var curDateEpochSec='12112';
if(jQuery('#content-wrapper',uniqueIdFind).length==1){
jQuery('#content-wrapper',uniqueIdFind).find('[onclick], [href]').not('link').not('a[nostat],[statproc],a[href="#top"]').each(function(index){
if(!jQuery(this,uniqueIdFind).attr('id')){console.log('id======dd_'+curDateEpochSec+'_'+index);jQuery(this,uniqueIdFind).attr('id','dd_'+curDateEpochSec+'_'+index);}
});
jQuery('#pages_htmlcode_content2').val(uniqueIdFind);
}else{
alert('erros')
}
}
I put a console write in the function and can see the id's being added, but for the life of me I can not figure out how to get those changes.
here is the sample html to put into the first textarea
<html lang="en-US">
<head>
</head>
<body id="com">
<div id="top" class="landing-page">
</div>
<div id="content-wrapper">
<div id="content-main">
asdasad
</div>
</div>
</body>
</html>
It just spits out the original code :(
Thanks
You neeed to wrap your test element in $()
example:
if(jQuery(uniqueIdFind).find('#content-wrapper').length==1)
I am using jQuery to reveal an extra area of a page when a button is clicked.
The script is
$(document).ready(function() {
$("#prices").on('click', 'a.click', function() {
$(".hiddenstuff").slideToggle(1000),
$("a.click").toggleClass("faded");
});
});
Then the button is
Enquire or Book
and the newly revealed area is
<div class="hiddenstuff" style="display:none">
<!-- HTML form in here -->
</div>
The problem I have is that the button and "hiddenstuff" div are wrapped in a PHP while loop so they repeat anything between one and six times. When the user clicks on one of the buttons, all the hidden divs are revealed. I would like just the hidden div related to the clicked button to reveal.
I presume that I have to create a javascript variable that increments in the while loop and somehow build that into the script. But I just can't see how to get it working.
EDIT, in response to the comments
The while loop is actually a do-while loop. The code inside the loop is about 200 lines of PHP and HTML. That's why I didn't show it all in my question. In a shortened version, but not as shortened as before, it is
do {
<!-- HTML table in here -->
Enquire or Book
<!-- HTML table in here -->
<div class="hiddenstuff" style="display:none">
<!-- HTML form and table in here -->
</div>
<!-- More HTML in here -->
} while ($row_season = mysql_fetch_assoc($season));
EDIT 2
The final solution was exactly as in UPDATE2 in the reply below.
The easiest thing for you to do is to keep your onclick binding but change your hiddenstuff select. Rather than grabbing all the hiddenstuffs which you are doing now, you can search for the next one [the element directly after the specific button that was clicked].
$(this).next('div.hiddenstuff').slideToggle(1000);
UPDATE
i created a fiddle for you with what I would assume would be similar to the output from your php loop. one change from my early answer was rather than using next(), i put a div around each group as I would assume you would have and used .parent().find()
http://jsfiddle.net/wnewby/B25TE/
UPDATE 2: using IDs
Seeing your PHP loop and your nested tables and potentially complex html structure, I no longer thing jquery select by proximity is a good idea [be it by big parent() chains or sibling finds].
So I think this is a case for injecting your ids. I assume your table structure has an id that you can get from $row_season ( $row_season["id"] )
you can then place it in the anchor:
Enquire or Book
and the same for your hiddenstuff
<div class="hiddenstuff" data-rowid=" . $row_season['id'] . " style="display:none">
and then your js can find it easily
$(document).ready(function() {
$("#prices").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".hiddenstuff[data-rowid='" + rowid + "']").slideToggle(1000),
$(this).toggleClass("faded");
});
});
updated fiddle
If your structure is something like this:
<div class="container">
Enquire or Book
<div class="hiddenstuff" style="display:none">
<!-- HTML form in here -->
</div>
</div>
You can do your js like this:
$(document).ready(function() {
$("#prices").on('click', 'a.click', function() {
$(this).siblings(".hiddenstuff").slideToggle(1000),
$(this).toggleClass("faded");
});
});
which is similar to William Newby answer, but a close look at your while loop, I'd think you could do this:
$(document).ready(function() {
$("#prices").on('click', 'a.click', function() {
var index = $(this).index();
$(".hiddenstuff")[index].slideToggle(1000),
$(this).toggleClass("faded");
});
});
There are several ways of do it, I hope I was useful.
i want to delete a particular class from my object as my requirement is to delete that dom data before displaying content. I have written a sample code but not able to get why that is not working. I jquery's remove is also not working. Please help me to get it solve. Thanks in advance
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// complete html
var test;
test = $('#issue_detail_first_row').html();
var x = $(test).find('#issue_detail_nav').not('.p1');
$('#sett').html(x);
});
</script>
</head>
<body>
<div id="issueDetailContainer">
<div id="issue_detail_first_row">
<div>
<div id="issue_detail_nav">
<div>test</div>
<div id="gett">
<div class="p1">
this content need to be deleted 1
</div>
</div>
<div class="p1">
this content need to be deleted 2
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div id="sett">
</div>
You need to remove the content from the DOM directly.
$("#issue_detail_first_row .p1").remove();
That will select the .p1 elements and remove them from the DOM
you can use remove function on javascript object.
If you want to preprocess it before displaying.
example
var a =$("#issue_detail_first_row").html();
var jhtml =$(a)[0];
$(jhtml).find('.p1').remove();
alert($(jhtml).html());
now use jhtml .
demo
http://jsfiddle.net/WXPab/14/
It seems that you're trying to duplicate a section, but without the .p1 elements.
You could use the clone()[docs] method to clone the section, the remove()[docs] method to remove what you don't want, and then insert its HTML.
$(document).ready(function() {
var test = $('#issue_detail_first_row').clone(); // clone it
test.find('.p1').remove(); // find and remove the class p1 elements
$('#sett').html( test.html() ); // insert the new content
});
Working example: http://jsfiddle.net/YDZ9U/1/
Only thing is that you'll need to go through and update the IDs in the clone, so that they're not duplicated on the page.