Merging JQuery & Javascript - javascript

I'm using some JavaScript to copy a value when an input is clicked. This works well.
Normally I do a JavaScript alert, but now I would like to use a query fading div.
If I run the jquery or javascript in separate scripts then they work fine, as soon as I join them they fail.
I think this is because I use a onMouseOver for the copy, but an input click event for the fading alert.
Any idea how I can merge these ?
<script language="JavaScript">
function toClip(me,vals) {
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText(vals);
clip.glue(me);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input').click(function() {
$messageCont = $('<div class="message_cont">');
$message = $('<div>DONE</div>').hide();
$messageCont.append($message);
$('body').prepend($messageCont);
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
$message.fadeIn(200, function() {
setTimeout(function(){
$messageCont.fadeOut();
//code to clean up container
}, 1500)
})
})
});
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
});
</script>
This is called via :
<div class='copy' onmouseOver="toClip(this,'$val')"><input type="button" value="Copy"/></div>
Thanks :)
UPDATE 15th April:
Sort of got this working using jquery instead of Javascript.
<input type="button" id="copy_button" data-clipboard-text="Copy Me!" Value="Click ME">
<script src="js/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById("copy_button"), {
moviePath: "js/ZeroClipboard.swf"
} );
clip.on( 'complete', function(client, args) {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
});
} );
</script>
Only issue I have is it only works with on button. I have lots I'd like it to work with.
Anyone know how to resolve that ?
Thanks :)

Several points :
New $messageCont/$message probably don't need to be created each time an input is clicked? The rest of the code suggests reuse.
The $messageCont = ... expression has incomplete HTML. You must ensure the div tag is closed, either with <div>...</div> or with <div />.
The script fades in $message but fades out $messageCont. This is OK on first use, but you will see precisely nada subsequently; there's no expression to fade $messageCont back in.
Delay in an animation queue can be achieved with .delay(), which is cleaner than using setTimeout().
It's hard to see what the second $messageCont.css(...) expression is supposed to achieve when $messageCont is positioned before it's contents are shown. If it is necessary to position $messageCont initially, then it's better to do so with a stylesheet directive, or in jQuery inside the $(document).ready(function() {...}) structure.
Reading between the lines, I think you probably want something more like this :
$(document).ready(function() {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$('input').on('click', function() {
$messageCont.css({
"left" : $(this).offset().left,
"top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
//code to clean up container
});
});
});

Related

How can I hide a div that I've just added with a click?

I'm appending some HTML to my button on a click, like this:
jQuery(document).ready(function($) {
$('#sprout-view-grant-access-button').on('click', function(e) {
$(this).toggleClass('request-help-cta-transition', 1000, 'easeOutSine');
var callback = $(e.currentTarget).attr('data-grant-access-callback');
var wrapper = $('.dynamic-container');
console.log(wrapper);
if( typeof window[callback] !== 'function') {
console.log('Callback not exist: %s', callback);
}
var already_exists = wrapper.find('.main-grant-access');
console.log(already_exists);
if( already_exists.length ) {
already_exists.remove();
}
var markup = $(window[callback](e.currentTarget));
wrapper.append(markup);
});
});
function generate_grant_access_container_markup() {
var contact_data_array = contact_data;
var template = jQuery('#template-sprout-grant-access-container')
return mustache(template.html(), {
test: 's'
});
}
As per the code, whatever comes from generate_grant_access_container_markup will be put inside dynamic-container and shown.
My problem is that, the newly added code just doesn't wanna dissapear upon clicking (toggle) of the button once again.
Here's my syntax / mustache template:
<script type="template/mustache" id="template-sprout-grant-access-container">
<p class="main-grant-access">{{{test}}}</p>
</script>
And here's the container:
<div class="button-nice request-help-cta" id="sprout-view-grant-access-button" data-grant-access-callback="generate_grant_access_container_markup">
Grant Devs Access
<div class="dynamic-container"></div>
</div>
I understand that the click event only knows about items that are in the DOM at the moment of the click, but how can I make it aware of everything that gets added after?
I would recommend visibility: hidden. Both display none and removing elements from the dom mess with the flow of the website. You can be sure you would not affect the design with visibility: hidden.
I don't deal with Jquery at all but it seems like this Stack overflow covers the method to set it up well.
Equivalent of jQuery .hide() to set visibility: hidden

How to make an image popup on click?

So my incremental has come a long way, I got assistance here to make the original popup and it works great, now i really want to make the popup an image?
so far i have:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone();
$("body").append(obj);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
and it works great and gives me a popup, but how the hell do i make it an image?
I have tried creating a div, putting an image inside that div and instead of calling "clone" calling on the div...
Am i on the right track?
Example of what i want from cookie clicker - http://orteil.dashnet.org/cookieclicker/
my game so far - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/
There are probably a lot of ways you could do this. To keep things as close to what you have now as possible here's what I would do...essentially just create 2 elements the first being your numbers and the second being the image, make sure the number is above the image using css's z-index, then animate them both in tandem:
Here's a working jsfiddle
HTML changes:
<img title = "" id="myImg" src="http://blog.beautyfix.com/wp-content/uploads/2012/09/Coffee_iStock_000006160362Medium.jpg" style="display:none" width="30" height="30">
Javascript changes:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone(); //im guessing you chose to use clone here to make it easier to work with the object, so I did the same for the image
var img = $("#myImg").clone();
$("body").append(obj);
$("body").append(img);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.css('z-index', '2');
img.css('position','absolute');
img.show();
obj.offset({left: e.pageX-10, top: e.pageY-25});
img.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
img.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
if you don't want to the trouble of doing it your self, you can use a jquery plugin that does it quite easily. I am sure there is a lot more in the,
Here is what i found!
Here is the demo page for full-screan popup plugin
....
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscreen-popup.js"></script>
....
<a class="open-popup" href="#popup">Open popup</a>
...
<div id="popup" style="display: none; width: 640px">
...
</div>
<script>
$(function() {
$(".open-popup").fullScreenPopup({
// Options
});
});
</script>
Example is from here and you can download the plugin from here and a list that contains many more

How to change FontSize in JavaScript?

I want to change the fontSize of the "Close" and "Open" texts. When i add this code:
$content.style.fontSize="14px"; nothing works anymore. Without this code the javascript is working but the font size of the "Close" and "Open" are to big.
This is the code:
$(".head").click(function () {
$head= $(this);
$content = $head.next();
$content.slideToggle(500, function () {
$head.text(function () {
return $content.is(":visible") ? "Close" : "Open";
});
});
});
If $content was a DOM node, then the way you are doing it would be fine. However, it appears to be a jQuery object, so you use the CSS method instead.
$content.css("font-size", "14px");
You also appear to be changing the CSS of $content but the text of $head, so you need to change the CSS for the element that contains the text you are trying to modify.
$head.css("font-size", "14px");
Try this and let me know the result:
$content.css("font-size":"14px");

How to fire a unique ID modal when multiple divs with class is clicked using jQuery?

Forgive the strangely worded question, my first StackOverflow post, and I'm a novice to jQuery/JS. I've used the search feature a lot and haven't found exactly what I'm looking for:
I am having an issue essentially, where I have dynamically added divs by the end-user (they pick how many content blocks they want to use), with the same class, that need to hide and show specific divs (with unique IDs) when they are clicked. I finally figured out how to give each div a unique ID, but I'm not sure how to get the child divs of the particular div what was clicked, to fire properly on click. Hope that makes sense.
Here is the HTML I have:
<div class="resource-video">
//Unique thumbnail
</div>
<div class="overlay-container hide" style="width: 50px; height: 50px;">
<div class="video-player hide">
//Included unique video
</div>
</div>
This will end up being duplicated based on how many videos are added.
Here is the JavaScript I am using:
//Generates unique IDs for each of the divs on the page with those classes
var i = 0;
$(".resource-video").each(function(i){
$(this).attr("id","video_"+ (i+ 1) );
});
$(".overlay-container").each(function(i){
$(this).attr("id","container_"+ (i+ 1) );
});
$(".video-player").each(function(i){
$(this).attr("id","player_"+ (i+ 1) );
});
//Currently opens all of them
$(".resource-video").on("click", function(){
openModal(".overlay-container", false, true);
alert($(this).attr("id")); //Alerts the right div clicked
if ($(".video-player").hasClass("hide")){
$(".video-player").removeClass("hide").addClass("show");
$(".overlay-container").animate({ height:'300px', width: '500px' }, "slow");
}
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
return false;
});
// Probably not totally necessary, but just in case
function closeModals(){
$("body").find(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(divID, allowScroll, blockScreen){
closeModals();
$(divID).show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};
As it stands now, all of the overlays open because I am targeting the class not the IDs. Basically, I need to find out a way to have the specific overlay associated with the specific div clicked on to display without hardcoding that, since the number of divs will change all the time. I would think I could use something like $(this) or event.target, but things I tried didn't work.
Hopefully I was clear enough with my issue and made it general enough for other people to use too. Thanks for any help in advance!
This uses DOM traversal functions to find the corresponding DIVs to the one that was clicked.
$(".resource-video").on("click", function(){
var overlayContainer = $(this).next();
var videoPlayer = overlayContainer.children(".video-player");
openModal(overlayContainer, false, true);
if (videoPlayer.hasClass("hide")){
videoPlayer.removeClass("hide").addClass("show");
overlayContainer.animate({ height:'300px', width: '500px' }, "slow");
}
return false;
});
// Only need to bind this once, not every time .resource-video is clicked.
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
// Probably not totally necessary, but just in case
function closeModals(){
$(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(div, allowScroll, blockScreen){
closeModals();
div.show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};

A question about a standard way to hide a div in Javascript and jQuery

I'm still relatively new to javascript and jQuery and was just wondering this.
Suppose I have this HTML snippet:
<p id="disclaimer">
Disclaimer! </p>
<input type="button" id="hideButton" value="hide" />
I could hide the div in the following ways:
$(document).ready(function() {
$('#hideButton').click(function() {
if ($('#disclaimer').css('display') == 'none') {
$('#disclaimer').show();
$('#hideButton').val('hide');
} else {
$('#disclaimer').hide();
$('#hideButton').val('unhide');
}
})
});
OR
$(document).ready(function() {
$('#hideButton').click(function() {
if ($('#disclaimer').is(':visible')) {
$('#disclaimer').hide();
$('#hideButton').val('unhide');
} else {
$('#disclaimer').show();
$('#hideButton').val('hide');
}
})
});
My question is: Is there a preferred method of hiding the div or is it just a matter of personal preference?
i'd write that like this
$(function() {
$('#hideButton').click(function() {
$('#disclaimer').toggle();
$(this).val(
$('#disclaimer').is(":visible") ?
'hide' : 'unhide'
);
})
})
or even
$(function() {
$('#hideButton').click(function() {
$(this).val(
$('#disclaimer').toggle().is(":visible") ?
'hide' : 'unhide'
)
})
})
in response to the comment, here some points why i think this code is better
$(...) looks nicer than document.ready
toggle() without a param is better than "if is visible then hide else show" - don't ask, tell.
always use $(this) to refer to the object itself in an event handler
use chaining when it doesn't hurt readability
Yes, you could use the .toggle(showOrHide) variant:
$(document).ready(function() {
$('#hideButton').click(function() {
var $disclaimer = $('#disclaimer'),
isVisible = $disclaimer.is(':visible');
$disclaimer.toggle(!isVisible);
$('#hideButton').val(isVisible ? 'unhide' : 'hide');
});
});
There is no point in querying the element's style to find out if it's visible; you can retain its state programmatically:
var isVisible = true,
disclaimer = $('#disclaimer'),
hideButton = $('#hideButton');
hideButton.click(function(){
disclaimer[isVisible ? 'hide' : 'show']();
hideButton.val(isVisible ? 'unhide' : 'hide');
isVisible = !isVisible;
});
I would do the actual hiding exactly like user187291 wrote.
But for your questions, I would suggest using the ":visible" selector since there are more ways to hide an element other than changing its display css attribute.
From the jQuery specification:
Elements can be considered hidden for several reasons:
* They have a CSS display value of none.
* They are form elements with type="hidden".
* Their width and height are explicitly set to 0.
* An ancestor element is hidden, so the element is not shown on
the page.
A certain animation may reach the state of having the width and height set explicitly to 0 and not change the display attribute.

Categories