I'm trying to show a fixed div using the show function of jquery. The show function works, but not when I try to add an effect with jquery ui. I have both jquery and jquery ui linked in an external file via a php include. When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
This is my html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by #EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by #CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
#media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance
http://jsfiddle.net/a9dbeo1o/
Recheck your script references.
To make sure jQuery is ready, try:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit:
Just a note: I also see you have your jquery css file inside your js folder.
Edit 2:
Updated fiddle:
http://jsfiddle.net/a9dbeo1o/2/
Related
I am trying to add an image that pops up for mobile viewers upon website entrance. I have a rough idea of the things that must go into the code but not sure exactly how to put things together. Could anyone help me out or point me in the right direction?
I am using cargo collective to build my website if that helps.
I'd like to do something similiar to: https://badbadbadbad.com/ (whenever viewed on a phone)
J
You can use JavaScript's onload function to make an action happen when a page loads. Example below just shows an alert box with some text, but it's a start.
Post your code and we can help further.
<!DOCTYPE html>
<html>
<head>
<title>Pop Up on Page Load</title>
<script>
document.onload(alert("This is my image."));
</script>
</head>
<body>
<p>This is my website.</p>
</body>
</html>
A simple approach could be:
fiddle.
HTML:
<div class="regularBox"></div>
<div class="modalBox">
<img src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
<span class="close">×</span> <!--Click X to close-->
</div>
JS:
function showPopup() {
document.querySelector('.modalBox').style.display = 'block';
}
showPopup(); // show modal image.
function closePopUp() {
document.querySelector('.modalBox').style.display = 'none';
}
document.querySelector('.close').addEventListener('click', closePopUp); // hide modal image
CSS:
img {
width: 80%;
}
.close {
font-size: 50px;
margin-left: -40px;
cursor: pointer;
}
.modalBox {
display: none;
}
.regularBox {
z-index: -1; // placed behind modalbox
position: absolute;
background-color: pink;
width: 500px;
height: 400px;
I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.
what I want is , when there is a window.load() event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
// this code is not working.
.background_image_div{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 600px;
height: 300px;
margin: 0 auto;
border: thin black solid;
z-index: 900;
}
.gif_loader_image{
position: absolute;
width: 50px;
height: 50px;
background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
// border: thin red solid;
left: 55%;
bottom: 15%;
z-index: 1001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>
Thank you.
instead of $(window).load(function (){ do a $( document ).ready(function() { as,
$( document ).ready(function() {
// Handler for .ready() called.
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
EDIT Caveats of the load event when used with images as taken from here, .load API
EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,
Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>
Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0
If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.
By poller I mean an interval timer.
You can do as like this way.
Just see this link
<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>
$(function(){
var bgimage = new Image();
bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";
$(bgimage).load(function(){
$(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);
$(".loader").hide();
});
});
http://jsfiddle.net/n4d9xxon
You can try like this :
$(document).ready(function (){
$('.gif_loader_image').fadeOut(1000);
});
body{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 100%;
height: auto;
}
.gif_loader_image{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
z-index: 1001;
background:rgba(0,0,0,.8);
text-align:center;
}
.gif_loader_image img{
width:30px;
margin-top:40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
<img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>
The main problem is that your $(window).load doesn't even fire
Why
This won't work since the .load() method was fully removed by jQuery 3 and since you are working with the version 3.1.1 it's not a surprise that your code doesn't work. You have to use now the .on() method to achieve the same effect
So
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
would turn into
$(window).on('load', function (){
$('.background_image_div').on('load', function(){
$('.gif_loader_image').hide();
});
});
Notice
Since you have already the $(window).load function at the beginning you don't have to define it again for your background image because this method will only be fired when all images are fully loaded so I think in your case this should also do the job.
jQuery
$(window).on('load', function () {
$('.gif_loader_image').hide();
});
I found a jsfiddle that did something similar to what I wanted to do. The modified version is located here: http://jsfiddle.net/7m7uK/479/ and it works on the jsfiddle. I copied the code to my site, changed the id's and now, it doesn't appear to be working. Below is the code located on my website. I am using jQuery 1.9.1 and jQuery UI 1.10.3 on my site. Any suggestions as to why this isn't working?
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('#footer_logo').hover(function(){
if ($('#powered_by').is(':hidden')) {
$('#powered_by').show('slide',{direction:'right'},1000);
} else {
$('#powered_by').hide('slide',{direction:'right'},1000);
}
});
});
</script>
HTML
<img src="img.png" width="63" height="25" id="footer_logo"/>
<div id="powered_by" width="100px"/>Powered By: </div>
CSS
#footer_logo {
color: #000;
cursor:pointer;
display:block;
position: absolute;
bottom: 0; right: 0;
z-index: 100;
}
#powered_by {
width: 200px;
height: 20px;
display: none;
position: absolute;
right: 0;
bottom: 0;
background: #ff0000;
z-index: 99;
}
I tried your code on jsfiddle and its working well. If the issue still persist check this SO post: JQuery UI show/slide not working correctly, maybe their solution can help.
You want to show #powered_by when you hover-in, then hide it when the you hover-out, right?
I looked into your code and it's not how you properly want it to behave. For example if you hover-in, the element slides, but when you hover-out then hover-in again without letting it finish hiding, the hovering execution will be reversed.
It will be more efficient if you do it this way:
$(document).ready(function() {
$('#footer_logo').hover(function(){
//hover-in
$('#powered_by').show('slide',{direction:'right'},1000);
},function(){
//hover-out
$('#powered_by').hide('slide',{direction:'right'},1000);
});
});
See this jsfiddle.
Or with pure jQuery: jsfiddle
I'm working on project to provide a bolt-on tool for websites, which makes heavy use of jQuery. Presentation / design is crucial, and I want to replace the standard (ugly) scrollbar applied by the browser to html elements with overflowing content, with something better looking.
There are numerous jQuery plug-ins around that apply custom scrollbars and allow styling via CSS which is great, but all the ones I've tried seem to suffer from the same problem which is this: if the scrollable content contains a form with text fields etc, tabbing between fields does not activate the scrollbar, and in some cases can screw up the custom scrollbar layout altogether.
Two examples of plug-ins I've tried:
http://manos.malihu.gr/jquery-custom-content-scroller
http://baijs.nl/tinyscrollbar/
I've tried others also, but in all demos / examples the content is plain text. I've done a lot of searching on this already, but it seems no-one has tried using these plug-ins with form-based content.
All these plug-ins seem to work in more or less the same way, and I can see exactly what happens and why, but just wondered if anyone else has had this problem and / or found a solution?
This issue can be easily replicated as follows (using the tinyscrollbar plug-in):
Add this to a standard html test page -
CSS:
<style>
#tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; }
#tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
#tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
#tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
#tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
#tinyscrollbartest .disable { display: none; }
</style>
Html:
<div id="tinyscrollbartest">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
</p>Here's a text field: <input type="text"/><p>
...
// lots of content to force scrollbar to appear,
// and to push the next field out of sight ..
...
<p>Here's another field: <input type="text"/></p>
</div>
</div>
</div>
Plug-in reference (assuming jquery libraries etc are referenced also):
<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$('#tinyscrollbartest').tinyscrollbar();
});
</script>
Now click in the first text field so it has focus, hit the tab key to move to the next one and see what happens.
I understand your problem.. But is hard to find a good solution to this. You could try to set a focus event on your form elements. And let this event trigger the scrollbar_update function of tinyscrollbar. You can set the offsetTop of the form element that currently has focus as the methods parameter. I think that would work.
$('formelements').focus(function(){
YourScrollbar.tinyscrollbar_update(this.offsetTop);
});
I had to overwrite the standard tabbing functionality with my own:
$(".scrollable").each(function() {
if (!$(this).data("scrollbar"))
{
$(this).data("scrollbar", new Scrollbar({
holder:$(this)
}));
$(this).find("input").bind("keydown", function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode == 9)
{
e.preventDefault();
var scrollTo = $(this);
if (e.shiftKey)
{
var nextInput = $(this).prevAll("input:not([type=hidden])").first();
scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
}
else
{
var nextInput = $(this).nextAll("input:not([type=hidden])").first();
}
if (nextInput.length)
{
console.log(scrollTo);
$(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
{
nextInput.focus().select();
});
}
}
});
}
});
It's a bit annoying to have to wait for the scroll but I don't see any other option.
I would like to use an add-in like simple-modal or the dialog add-in in the UI kit. However, how do I use these or any other and get a result back. Basically I want the modal to do some AJAX interaction with the server and return the result for the calling code to do some stuff with.
Here is how the confirm window works on simpleModal:
$(document).ready(function () {
$('#confirmDialog input:eq(0)').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close: false,
overlayId: 'confirmModalOverlay',
containerId: 'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
If your HTML is like the following, and you are trying to avoid bootstrap, then you try it like the following. You can also apply AJAX on this structure since this just like any other part of the HTML of your page. Or you try the same using Bootstrap and your work will be easier. Here is a code, please give it a try. It still can be enhanced and modified:
$("button.try-it").on("click", function() {
$(".modal-container").removeClass("hide");
});
$(".close-btn").on("click", function() {
$(".modal-container").addClass("hide");
});
.modal-container {
position: absolute;
background-color: rgba(35, 35, 35, 0.41);
top: 0;
bottom: 0;
height: 300px;
width: 100%;
}
.modal-body {
width: 100px;
height: 100px;
margin: 0 auto;
background: white;
}
.close-btn {
float: right;
}
.hide {
display: none;
}
.body-container {
position: relative;
box-sizing: border-box;
}
.close-btn {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-container">
<div class="button">
<button class="try-it">Try It!!</button>
</div>
<div class="modal-container hide">
<div class="modal-body">
<span class="close-btn">x</span>
<p>Here is the content of the modal</p>
<!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->
<!--Or you can use Bootstrap modal instead of this one.-->
</div>
</div>
</div>
Hope this was helpful.
Here is the link to a fiddle.
Since the modal dialog is on the page, you're free to set any document variable you want. However all of the modal dialog scripts I've seen included a demo using the return value, so it's likely on that page.
(the site is blocked for me otherwise I'd look)