Hide or unhide text with button click - javascript

I'm new to html and this is our first intro homework assignment for javascript; so naturally I am freaking out! Here is an example of what I'm talking about:
<div class="someclassname"> <a href="image.jpg">
<img src= Image/image.jpg height="80">
</a>
<p>some text to he hidden with the image!</p>
</div>
I have looked everywhere and found similar stuff but I am way to incompetent to translate it into what I am doing
I'm thinking the code should look something like this maybe?
<script>
$(document).ready(function() {
$("Button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
</script>
Am I close? Please help!

You are close enough...
You have a syntax error in your script, missing pair of }) and then place a button in your html
$(document).ready(function() {
$("button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
}); //this is missing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide</button>
<div class="someclassname">
<a href="image.jpg">
<img src="Image/image.jpg" height="80" />
</a>
<p>some text to he hidden with the image!</p>
</div>

Related

i can't trigger alert with an image on jquery

the problem i have here is very annoying.What i wanna have is there is an empty box,i press a button and it places an image in that box,the code for that is:
HTML
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
As you can see the source of the image is nothing because i have to choose it
Jquery for choosing the source and placing it in the box:
<script type="text/javascript">
$('#rockb').click(function()
{
$('#mty').attr("src", "https://i.redd.it/2u0y0z5i12py.png");
}); </script>
just so you know there are multiple buttons so you can chose multiple images basiccaly the same as i show only other name and image link.
i want a script that says IF i press rockb it alerts 'paper' if i select paperb it says 'paper'
but i cant seem to make it work.here is my code:
<script type="text/javascript">
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
Thank you for helping me and hopefully i explained it good!
$(document).ready(function(){
$('button').click(function(){
$('#pr').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZtjprGwxPE5FVcY72h1MWxvVVSiW7RFHmJ6DZ9G1lf0YOr-vV");
if(true){
alert('euirhzeurhzu')
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>

Disable div based on cookie.js

following code works but when I try to use it in popup it does not work use cookie.js
This part in heading
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$('#yes').on('click', 'a.disabled', function (e) {
onclickLink(e, $(this));
});
$("#yes").on('click', '#remove', function (e) {
alert('You are free to visit the page again');
$.removeCookie('link_disabled');
});
});
function onclickLink(event, this1) {
if ($.cookie('link_disabled') === null || $.cookie('link_disabled')==undefined) {
/* do whatever you want with link*/
$.cookie("link_disabled", 1, {
expires: 5
});
alert('Click OK to post your campaign NOW! You will only be allowed to boost a new campaign after 5 days.');
/*setting the cookie for 5 days*/
} else {
alert('You Have Already Boost This Campaign!');
event.preventDefault();
}
}
});//]]>
</script>
This part in body
<!-- Boost -->
<div id="yes">
<br><img src="../../../img/boost.png" alt="Logo" />
<br>
</div>
when try in popup it does execute post.php file but don't disable div here is my code in popup
<img src="http://mymobi.cards/images/button-boost.png" align="bottom" style="padding-left: 25px; padding-top: 10px">
<div data-role="popup" id="boost"><a data-rel="back" data-icon="delete" >
</a>
<div data-role="content" id="centerlocation">
<h2>Boost Your Campaign on Facebook</h2>
<img src="images/compressed-slide1.jpg"><br><br>
<div id="yes">
<br><img src="../../../img/boost.png" alt="Logo" />
<br>
</div>
</div>

How to load the content of <h> element using jquery

I have a tag like:
<h3>Mobile
<img align="middle" alt="Edit" class="attEditCategory" src="/Images/edit.png">
<img align="middle" alt="Delete" class="attDeleteCategory" src="/Images/delete.png">
</h3>
I want to display the text of h3 ie "Mobile" in edit click button (on alert).
$(".attEditCategory").button().on("click", function (event) {});
Please help.
You can use $(this).parent().text() to get the text. Or $(this).closest('h3').text() if there could be more to the hierarchy than shown.
E.g.:
$(".attEditCategory").button().on("click", function (event) {
alert($(this).parent().text());
});
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<h3>Mobile
<img align="middle" alt="Edit" class="attEditCategory" src="/Images/edit.png">
<img align="middle" alt="Delete" class="attDeleteCategory" src="/Images/delete.png">
</h3>
If there could be text inside the buttons (e.g., button or a elements rather than img), $(this).parent().text() would include that text. So in that hypothetical case, it's more difficult (but still quite simple) to get just the text of the element itself and not the text of its children:
alert($(this).parent().contents().map(function() {
return this.nodeType === 3 ? this.nodeValue : ""; // 3 = text node
}).get().join(""));
$(".attEditCategory").button().on("click", function (event) {
alert($(this).parent().contents().map(function() {
return this.nodeType === 3 ? this.nodeValue : ""; // 3 = text node
}).get().join(""));
});
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<h3>Mobile
<a align="middle" alt="Edit" class="attEditCategory">edit</a>
<a align="middle" alt="Delete" class="attDeleteCategory">delete</a>
</h3>
try
$(".attEditCategory").on("click", function (event) {
alert($(this).parent().text())
});
DEMO
SInce the class is a child of the h3 use parent() to target the <h3> and text() to get the text
$(".attEditCategory").button().on("click", function (event) {
alert( $(this).parent().text());
});
$("h3").text();
Official documentation.
To access a specific h3 tag with a class or an id you do something like:
$("#foo").text(); //foo is the id
$(".foo").text(); //foo is the class
Simply:
$('h3').text();
And it returns just: "Mobile". It'll be enough to alert:
alert($('h3').text());

Replace Content with Javascript/Jquery

http://jsfiddle.net/bUjx7/31
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.fieldsgame1 {
display:none;
}
.fieldsgame2 {
display:none;
}
.fieldsgame3 {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tablereplace a').click(function () {
$('.fieldsmatch').fadeOut(0);
$('.fieldsgame1').fadeOut(0);
$('.fieldsgame2').fadeOut(0);
$('.fieldsgame3').fadeOut(0);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(0);
});
});
</script>
Put this into my WordPress header. CSS is fine. HTML is fine. Javascript isn't working. Help?
I'm not really sure what "isn't working" (since the Fiddle you're showing is working fine), but I did manage to clean up your code a bit. It's more DRY, fadeOut with speed of 0 is the same as hide()/show(), & jQuery.data() is used to retrieve the data-region.
HTML
<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>
CSS
.fieldsgame {
display:none;
}
JS
$('.tablereplace a').click(function () {
$('#fieldsmatch, .fieldsgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
JSFiddle.
=== UPDATE ===
Based on your comment, I found the following difference on the live page:
Match
Game 1
Game 2
Game 3
<div class="tablereplace">
<div class="fieldsmatch" id="fieldsmatch">8-0</div>
<div class="fieldsgame" id="fieldsgame1">7-1</div>
<div class="fieldsgame" id="fieldsgame2">6-2</div>
<div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>
Your specified click function is based on the .tablereplace a selector. But, on your site, there isn't any a found inside the .tablereplace . In other words, your HTML is wrong.

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.
I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.
Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>
create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);
Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.
Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>

Categories

Resources