I'm using Google Map Javascript Api to put a map on my website.
I created a button on the top right corner of the map just so the user could close it
This is my CSS button code:
#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}
I used jQuery to put it inside the #map div
$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});
and I have jQuery code to hide the map when I'm clicking on it
So I can see the button on the corner but it's not clickable
you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.
<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>
now you can add some jquery to close the testing-div
$("#close-map").click(function(){
$(".testing-div").slideUp();
});
Related
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I'd like to have a different FA icon in the before and after state of the same button. In other words I display a button and it shows a FA "plus"icon. Then when I click the button a new screen comes up but the same button remains on the screen but now I want is to display a "close" FA icon. In my CSS I have this:
.shape:before {
content: "\f234";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
.shape:after {
content: "\f00d";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
However what happens in that the button shows both button before and after states. How do I only show the plus icon before the button is used and then the close icon once the button has to close the new screen?
:before and :after refer to positions in the DOM relative to the defined classes, not events.
You just need to:
rename your classes without the pseudo elements (:before and :after), something like .shape and .shape-opened and remove everything from .shape-opened except the content property
add some JavaScript to toggle these classes
Something like:
<html>
<head>
<!-- ... -->
<style>
.shape {
content: "\f234";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
.shape-opened {
content: "\f00d";
}
</style>
<script>
toggleClass = () => {
// this assumes there's only one element with the class shape or that you only want the first one
// You could also use the javascript `event` object to get the current
var shape = document.getElementsByClassName('shape')[0];
console.log(shape);
if (shape.classList.contains('shape-opened')) {
shape.classList.remove('shape-opened');
} else {
shape.classList.add('shape-opened');
}
}
</script>
</head>
<body>
<!-- ... -->
<div class="shape" onClick="toggleClass()"></div>
<!-- ... -->
</body>
</html>
(I threw the console.log in there so you could see the classes toggle in the console even if the content changes weren't working because of e.g. a dependency problem with FA.)
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I am trying to change jQuery UI dialog's default styles to something similar to this -
I got it to close changing some CSS in jQuery UI.
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
#success {
padding: 0;
margin: 0;
}
.ui-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
}
.ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
HTML :
<div id="popup-msg">
<div id="loading">
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
<div id="success" title="Hurray,">
<p>User table is updated.</p>
</div>
</div>
THIS IS FIDDLE
But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.
Thank you.
See https://jsfiddle.net/qP8DY/24/
You can add a class (such as "success-dialog" in my example) to div#success, either directly in your HTML, or in your JavaScript by adding to the dialogClass option, as I've done.
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
Then just add the success-dialog class to your CSS rules as appropriate. To indicate an element with two (or more) classes applied to it, just write them all together, with no spaces in between. For example:
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
You can specify a custom class to the top element of the dialog via the option dialogClass
$("#success").dialog({
...
dialogClass:"myClass",
...
});
Then you can target this class in CSS via .myClass.ui-dialog.
The solution only solves part of the problem, it may let you style the container and contents but doesn't let you change the titlebar. I developed a workaround of sorts but adding an id to the dialog div, then using jQuery .prev to change the style of the div which is the previous sibling of the dialog's div. This works because when jQueryUI creates the dialog, your original div becomes a sibling of the new container, but the title div is a the immediately previous sibling to your original div but neither the container not the title div has an id to simplify selecting the div.
HTML
<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
Nothing here
</div>
You can use CSS to style the main section of the dialog but not the title
.custom-ui-widget-header-warning {
background: #EBCCCC;
font-size: 1em;
}
You need some JS to style the title
$(function() {
$("#nonmodal1").dialog({
minWidth: 400,
minHeight: 'auto',
autoOpen: false,
dialogClass: 'custom-ui-widget-header-warning',
position: {
my: 'center',
at: 'left'
}
});
$("#dialog1").click(function() {
if ($("#nonmodal1").dialog("isOpen") === true) {
$("#nonmodal1").dialog("close");
} else {
$("#nonmodal1").dialog("open").prev().css('background','#D9534F');
}
});
});
The example only shows simple styling (background) but you can make it as complex as you wish.
You can see it in action here:
https://codepen.io/chris-hore/pen/OVMPay
I am trying to create a page similar to Google's homepage. It is to have a centrally located input box and a div on top of the page displaying links. I also want the page to resize itself dynamically if I change the size of the browser window. I have achieved partial success using yui2 grid css and a table. Here's a snippet:
<body>
<div id="doc3">
<div id="hd"><a style="float:left" href="link1.com"> link1</div>
<div id="bd" style="display: table; height: 400px;">
<div style="display: display: table-cell; vertical-align: middle">
<input name="searchbox" value="searchinput" size="40" />
<input name="submit" type="submit" value="search />
</div>
</div>
</div>
</body>
The only issue with this html is that the page doesn't dynamically resize upon resizing the browser window. Is there a better way of doing this ?
You can use jQuery to set it to perfectly.
jQuery
$(window).resize(function() {
var wh = (($(window).height()-$('#center').height())/2)+'px';
var ww = (($(window).width()-$('#center').width())/2)+'px';
$('#center').css({
top: wh,
left: ww
});
}).resize();
CSS
#center {
border: 1px solid black;
position: absolute;
width: 50px;
}
If you don't care about perfectly vertically centered, you could do:
#center {
border: 1px solid black;
margin: 0 auto;
position: relative;
width: 50px;
top: 45%; /* or whatever % looks 'right' */
}