Ok, I'm not seeing something I guess...
I have an button that links down:
HTML:
<button id="get-down"><img src="images/arrow-down.png" /></button>
CSS:
#intro #get-down{
min-width: 4%;
max-width: 4%;
position: absolute;
z-index: -998;
bottom: 2%;
left: 46%;
border: none;
border-radius: 0;
visibility: hidden;
cursor: pointer;
}
#intro #get-down > img{
border: none;
}
JS:
// Scroll to demo section
$(function(toDemos) {
$('#get-down').click(function() {
$.scrollTo('#content', 500);
});
});
The JS code worked before, when I put it on list elements. But this should be able to work as well right? Or am I missing something?
Much thanks in advance!
Try scrolling the html element using the scrollTop method instead.
$('html').scrollTop(500);
or alternatively, if your #content is really scrollable, you can scroll that as well.
$('#content').scrollTop(500);
It works, check this http://jsfiddle.net/8eve6/2/
Are you sure you have included some sort of jQuery plugin like this one here: http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js" type="text/javascript">
Related
I've got a problem with jquery hide() and show() on internet explorer 10. I need a pop-up window for a banner I'm making, when clicking left bottom corner a div will show, when div is up and clicking on top right corner div will hide.
This work on modern browser, but not in internet explorer 10.
HTML
<div id="banner">
<button class="show"></button>
<div id="modal">
<button class="hide"></button>
</div>
</div>
CSS
#banner {
width: 468px;
height: 240px;
border: solid 1px black;
position: absolute;
overflow: hidden;
cursor: pointer; cursor: hand;
}
#modal {
width: 468px;
height: 240px;
display: none;
position: absolute;
z-index: 9999;
background-color: red;
}
.show {
width: 80px;
height: 35px;
bottom: 0px;
position: absolute;
z-index: 12;
}
.hide {
right: 0px;
top: 0px;
width: 50px;
height: 50px;
position: absolute;
z-index: 12;
}
Jquery
$(document).ready(function(){
$(".hide").click(function(){
$("#modal").hide();
});
$(".show").click(function(){
$("#modal").show();
});
});
EDIT - problem solved
It appears you cannot click empty tags (only specified width/height) in IE 10 and below, so I had to fill it with a transperant color (rgba 0,0,0,0.001).
I also realized it could be done without jquery, duh.
You can always use vanilla JS, and do something like:
document.getElementById('modal').style.display = 'block';
or
document.getElementById('modal').style.display = 'none';
This way is also more performance efficient than going through a jQuery object.
Hide and Show methods of Jquery toggles the CSS property display to none/block for applied HTML tag.So question rules out about compatibility.
Just correct the error on console of browser (F12) if any (I saw one unreferenced object) and try again .
Also, check the browser mode you are running. (F12).
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.
<script type="text/javascript">
$(document).ready(function() {
$('#right').click(function() {
$('li').animate({
left: '-600px'
}, 500);
});
});
</script>
Fiddle
See this example.
This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.
.carousel-inner li {
display: inline;
float: left;
margin: 20px;
border: 1px solid #999;
padding: 25px;
border-radius: 20px;
position: relative; // Add this so setting a left position will work
}
Simply try adding that in Chrome Inspector and you'll see it works. Ciao!
Add position: relative to your .carousel-inner li.
As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.