I have some custom buttons overlayed on a Google Map. When you click on one of the buttons it slides the map div right 360px and slides in a 360px wide div on the left in the place where the map vacated. When I click the button on the map it works as designed and slides the map over and div in like it should and when you click the close button on the div it slides out of focus and the map goes back to where it was before.
My issue is I am trying to have this div that slides in to show on load. My solutions I have tried haven't quite worked and I am not great with Javascript. If I use CSS z-index 1 it will load when the page loads but it shows it on top of the map instead of the map sliding over 350px. So a CSS solution won't work in this case because the div overlays on the map instead of sliding it over and covers the map which has a logo in the top left corner.
This is how I open and close the div.
HTML
<button id="alertBtn" class="map__control_icon" onclick="openAlerts();"><i class="fa fa-exclamation-triangle"></i></button>
Javascript
function openAlerts() {
document.getElementById("alert-list").style.minWidth = "360px";
document.getElementById("map-wrapper").style.marginLeft = "360px";
document.getElementById("mapButtons").style.marginLeft = "-360px";
}
function closeAlerts() {
document.getElementById("alert-list").style.width = "0";
document.getElementById("map-wrapper").style.marginLeft= "0";
document.getElementById("mapButtons").style.marginLeft = "0";
}
So how can I have this show by default when the page loads but slide the map over like it does when you click the button? Also is there someway to get the width .style.marginLeft to auto so it slides over based on the size of the div that slides in as sometimes the content is dynamic but if I set a hard set margin then there is extra space when the div isn't filling the full width. Hench why "alert-list" is set with a minWidth.
-Thanks!
I was able to easily solve this by adding the follow to the top of my Javascript.
$(document).ready(openAlerts());
If you want pure JavaScript then use this
document.addEventListener('DOMContentLoaded', openAlerts, false);
Related
I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.
Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN
Try to add an overflow:hidden on the span with id="apImgBox"
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
Ok I have a page with stacked div's and anchors which use a jquery slide slide down. When the bottom of a stacked div reaches the top of the screen I want the jquery to automatically scroll to the next div, which may be 1000px south.
How can i do this in javascript?
my idea is to put an image the bottom of the div and somehow check the screen to see if the image is in the top half of the monitor which would call a function to scroll to the next anchor..
Is this possible?
var wHeight =$(window).height()/2;
$(window).scroll(function(){
var imgOff = $('#two').offset().top-$(window).scrollTop();
if(imgOff<wHeight){
alert('Kill BILL!');
}
});
havent tried this out but it should work
Edit: this works try it here
http://jsfiddle.net/BG2Cz/
P.S. Be warned it will spam alerts once u pass the middle
I am using this JQuery plugin to show (Scroll to Top) button, but I want this link or button to be appeared after scrolling down of specific part of the page. For instance, inside the body tag I have many divs and many discription but I want the (scroll to Top) link to be appeared after scrolling down the third div inside the body.
What should I do to get this issue?
looks like you just have to set the top to the position of your div:
try changing
var top = $(document.body).children(0).position().top;
to
var top = $('#your_div').offset().top;
The pop up image for "ice white" and "violet" pop up in different places. How do I make them both pop up in just one position?
Could you perhaps define a single div that uses absolute position and then on hover over Violet or Ice White, draw the popup image inside that div you created?
So something like:
var displayDiv = document.getElementById("displayDivID");
// draw popup image in the div
displayDiv.innerHTML = "<div id=\"violet\">...</div>";
displayDiv.style.display = "block"; // to show it
That way, whenever you need to display an image in the same position, it's always drawn inside that div you specified.
I would assume you have a class that controls the formatting of that div like position and borders etc.
EDIT
I've taken your code from your site and added some more code.
Save this code as a html page onto your computer and try it.
Look for the last css code snippet right before the closing tag. That block of css there controls the look of the div and position it in the middle of the page. The css only sets a fixed position. You could alternatively, use javascript to dynamically calculate the width and height of the user's browser window, then render the css code accordingly so the div is always in the middle of the browser regardless of the inner image dimension.
In your previous javascript code snippet for the displayDiv, I've fixed up a few things and added two functions for when the mouse is over a thumbnail and when it's out of a thumbnail. On mouse over will pass the url of the image to the function that will be used to render an image into the displayDiv.
Hope that helps.
EDIT 2 - Fade In and Out
You certainly can.
All you need to do is change the two functions to use jQuery fadeIn() and fadeOut() like so:
function changeDisplay(bgImageURL)
{
var displayDiv = document.getElementById("displayDiv");
// draw popup image in the div
displayDiv.innerHTML =
'<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';
// show the display in case it was hidden before
$('#displayDiv').fadeIn();
}
function hideDisplay()
{
// hide it when the mouse rolls off the thumbnail
$('#displayDiv').fadeOut();
}
This jQuery is a basic one. It will have a problem where if you move your mouse on and off the thumbnail quickly, it causes the display div to come on and off, on and off, on and off even if your mouse is already off the thumbnail.
The proper way would be to rework the code and use mouseEnter and mouseLeave on the thubmnail elements.