I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.
Related
In this website "https://www.armoli.com" as you can see, the menu is transparent at first and integrated with the image on the back, but its color changes as you scroll down.how can I do this in html?(with css and js)
I think You will have to use Intersection Observer API.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Much better than listening to scroll event.
(it is an API that helps you listen to an element in the DOM (can be an array). and it triggers when that element appears on the screen. then you manipulate the DOM depending on what appears there.
Check this tutorial: https://www.youtube.com/watch?v=T8EYosX4NOo
You can probabbly do this using css and javascript, simply make two css classes with your different themes e.g.
.navbar_active {
color: red;
}
.navbar_other {
color: blue;
}
Then just use some javascript to add/remove the css classes, depending on the current scroll.
Edit: something like this sounds like what your looking for: Transitioning Affixed Navigation bar - CSS theres, even a fiddle you can try: http://jsfiddle.net/jv0qvvp2/1
basically the same approach as what i said, add/remove css classes depending on the current scroll position
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I am working on a website.
Now what I want is to open a small screen with text and images,which pops up when a link is clicked.
I don't want to open small sized webpage..
What I want is similar to this in chrome.. "chrome://settings/startup"
please if someone can tell me what this feature is called and how it is implemented It will be helpful.
It's called a modal window. Not a real pop up.
Create a div with id
<div id="modal">
// your content with images
</div>
CSS
#modal {
position: absolute;
z-index: 99;
top: 25%;
width: 400px;
height: 300px;
margin: auto;
display: none;
}
Now in javascript:
On click of the link, show the modal window
$("#buttonId").click(function() {
$("#modal").show();
})
There already many plugins which does this:
Jquery UI
Bootstrap
But, if you have Chrome or a modern browser, use the <dialog open> tag (like a div) and use id's to edit the dialog via JS, such as:
window.<id>.close(); // closes dialog/hides it
window.<id>.show();
window.<id>.showModal(); // instead of showing it regularly, it puts it to the middle of the screen and greys the background like an alert. (you can edit the background effect with CSS)
If you want to use pure html, probably you can use window object. It has several types of popup window method, like window.alert(), window.comfirm(), etc.
If you want to use with javascript and css, then there are many ways to implement it. Here is a simple example I found:
[1]http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.