Tab hard to be clickable - javascript

I have a tab to be displayed on the bottom left corner of the window, but it seems to be hard to make it actually clickable (also the iframe is not clickable), so it does´t do any animation on cell phone and even web browser.
http://jsfiddle.net/bo9gy77q/3/
How could I fix this eror? In the console it says: Uncaught ReferenceError: $ is not defined. The problem with clicking the tab on mobile browsers, and make clickable the iframe?
Note: There is a iframe in the tab, so I also wil need it to be clickable, so far nothing that I tryed fix it.
Note: The hard to click is especially refered to old movile devices and safary.(so hard to make it work on those)
¿CAN I MAKE THE CLICKABLE ZONE BIGGER?

Have a look at this fiddle, animation is working now fine and smooth : http://jsfiddle.net/bo9gy77q/2/
I have just removed transition property from "#a-tab" class and smoothness is there
$("#a-tab,#a-tab *").click(function () {
//$("#a-tab").focus();
$("#a-tab").animate({
width: '320px'
}, "fast");
$(".deluxe").animate({
width: '30px'
}, "slow");
})
$("#a-tab").on('focusout', function () {
$("#a-tab").animate({
width: '10px'
}, "fast");
$(".deluxe").animate({
width: '5px'
}, "fast");
});
#a-tab:focus {
outline:none;
width:340px;
}
.deluxe {
position: relative;
background:#999;
width:5px;
height:108px;
}
#a-tab {
background:#FFF;
border:solid #d9d9d9 2px;
position: fixed;
bottom: 12px;
right: -20px;
z-index: 5;
width: 30px;
height: 112px;
padding: 5px 20px 5px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="a-tab" tabindex="1">
<table>
<tbody>
<tr>
<td>
<div class="deluxe"></div>
</td>
<td></td>
<td>
<div class="g-page" data-width="273" data-href="//plus.google.com/u/0/111125806825828710565" data-layout="landscape" data-rel="publisher"></div>
</td>
</tr>
</tbody>
</table>
</div>

Related

Hide popup when mouse moves off

I'm trying to add a popup when a td is mousedover. Each row has multiple td's and the popup should only work on the first one. This works as long as mouseout is in the same column. That is, if I move the mouse up and down, the popup appears and disappears as expected. But if I move the mouse horizontally into the next td, the popup doesn't disappear. I created a jsfiddle for this but the popup isn't working. The console is saying the javascript function isn't defined but it works fine here so I must have something wrong in the jsfiddle setup. Here's the code I am using. Td's are being used because this is the code I was given. Can anyone see what is needed to get the popup to hide no matter how the mouse moved?
EDITED to solve the problem.
<style>
#pop-description{
display : none;
position : absolute;
z-index : 99999;
left : 0px;
padding : 10px;
background : #3AB9AE;
border : 1px solid #9a9a9a;
margin : 0px;
}
</style>
<script>
$(document).ready(function(){
function ShowDescription(id) {
var position = $('.class-desc-'+id).position();
var desc = $('#desc-'+id).val();
$('#pop-description').css('top', position.top);
$('#pop-description').text(desc);
//$('#pop-description').toggle();
$('.class-desc-'+id).mouseenter(function() {
$('#pop-description').css('display', 'block');
}).mouseleave(function() {
$('#pop-description').css('display', 'none');
});
}
});
</script>
<div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
<table>
<tr>
<td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-0" value="first test" id="desc-0">
</tr>
<tr>
<td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-1" value="second test" id="desc-1">
</tr>
<tr>
<td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-2" value="third test" id="desc-2">
</tr>
</table>
I think you are overthinking it. Here is what I would do. I would use jQuery as demonstrated below.
Trigger the action you need on mouseenter
Initiate the opposite action on mouseleave
$(function() {
$(".toggle").mouseenter(function() {
// Your code goes below: initiate first action
$(this).addClass("showOff");
}).mouseleave(function() {
// Your code goes below: Initiate opposite action
$(".toggle").removeClass("showOff");
});
});
div {
cursor: pointer;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
transition: all 2s;
}
.showOff {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">Hove over me</div>
Note: In your case, you show the popup on mouseenter and hide it on mouseleave
Why not just using hover ? Like
class-desc:hover .popup{
display: block;
}

How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery

// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.

Script not working properly when page refreshed

I have the code of a scroll to top button as you can see at Jsfiddle The problem with the code is that at the time the page is loaded the button is displayed (which it should not, it should be displayed when the person scrolls below). Once scrolled down, on scrolling up the issue no longer prevails, the button vanishes at the top as it should. Refreshing the page again would let us see the button again without any scrolling down.
Since I am a javascript noob, I don't know what I am doing wrong.
<div class="scroll-top" style="display: block;">
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
<span class="flame"></span>
<span class="flame"></span>
<span class="flame"></span>
</div>
<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}
.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}#keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>
<script type="text/javascript">
// Scroll to top button
wnHeight = jQuery(window).height();
//Check to see if the window is top if not then display button
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > wnHeight/2) {
jQuery('.scroll-top').fadeIn();
} else {
jQuery('.scroll-top').fadeOut().removeClass('scrolling');
}
});
//Click event to scroll to top
jQuery('.scroll-top').click(function(){
jQuery('html, body').animate({scrollTop : 0},800);
jQuery(this).addClass('scrolling');
});
</script>
Thanks.
Initialize the button with display: none (in CSS) and it doesn't how at the start of the script
.scroll-top { display: none; }
Then it works with your javascript code.
See it working: https://jsfiddle.net/0d5188ry/2/

Map not opening without refreshing page once closed

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.

Place animated footer under other divs

so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/

Categories