I have a question, how can I create a costume pop up,so when user visit it show on screen for some minutes.
I have tired creating a pop that show image and text when visitor come.
You can do something like the following
Create an element with a unique id and place it where you want in
your template
Style the element with CSS
Use JavaScript to hide the element after a desired time
Here is the code
<div id="msg">welcome, I will disappear after 5 sec</div>
<style>
#msg {
position: fixed;
padding: 2em;
background: black;
color: white;
z-index: 100000;
}
</style>
<script>
setTimeout(function(){
document.getElementById('msg').style.display = 'none';
}, 5000);
</script>
Related
I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an 'X' button and when you press it, it will be removed from the store. Any ideas or any example? I have these files:
showactivecamp.hbs
<style type="text/css">
.image {
width: 190px;
height: 190px;
opacity: 1;
}
.image:hover {
opacity: 0.3;
}
i.fa-remove {
#extend . image : hover;
color: #fff;
background-color: #808080;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 8px;
right: 8px;
padding: 2px;
z-index: 1;
cursor: pointer;
}
</style>
<div class="thmb-prev">
<button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}>
</button>
<img src="/assets/images/photos/media2.png" class="image" alt="">
</div>
controllers\showactivecamp.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs: ['campaign'],
actions: {
removeCampaign: function (campaign) {
var camp = this.get('model');
camp.deleteRecord();
camp.save();
}
},
getactivecamp: function () {
return this.store.findAll('campaign');
}.property()
});
views\showactivecamp.js
import Ember from 'ember';
export default Ember.View.extend({
click: function (evt) {
this.get('controller').send('click', this.get('campaign'));
}
});
I believe something like this would be best handled with a CSS solution rather than creating the unnecessary views in Javascript
http://emberjs.jsbin.com/jecew/1
You posted your code but not mentioned about the issue. I am not sure what is the issue you are getting.
Have a look into this jsbin http://jsbin.com/xumomu/1. I have used FixtureAdapter.
UPDATE:
http://jsbin.com/xumomu/2/
I have wrapped image and close icon in a view called 'image'. X icon will be shown on mouse enter and will be hidden on mouse leave using jQuery.
As Ember guide says, Use View when you need sophisticated handling of user events.
I suggest you to go through documentation to get clear idea about View and Event handling in ember.
I have this code to show google maps in my django template and it's working fine. But I'd like to have a button on the google map that opens the map in a new google maps tab. Similar to the image below
<script>
function initialize() {
var myLatlng = new google.maps.LatLng({{doctor.clinic.geolocation}});
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
EDIT:
At time of a writing my answer, I had not seen that button in any of Google Maps JavaScript API so I decided to provide an possible implementation for it. However, only after that I found that it is actually a functionality of Google Maps Embed API.
Therefore, if you are not using Google Maps JavaScript API but wan't to use Google Maps Embed API instead, I recommend checking out: Google Maps Embed API (Viewmode)
Solution for Google Maps Embed API:
<iframe
width="300"
height="250"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed/v1/view?key=<PLACE_HERE_YOUR_API_KEY>¢er=-33.8569,151.2152&zoom=18">
</iframe>
Solution for Google Maps JavaScript API:
However, because the question is tagged with google maps api 3. The solution explained below is also provided.
You can make either normal css button (or link) which you just lift over your map and a function which will open that map in correct url or make a custom button similar than google uses.
As an example, I ended up making normal css button which is sitting above the map, and once you click it it takes current location of the map (center) and zoom level - makes the url and opens it at the other tab.
Here is working js fiddle example.
Full code also below.
JavaScript and relevant part of the HTML:
<script type="text/javascript">
// Handle to our map
var map;
/**
* Method for initializing the map
*
*/
function initialize() {
var myLatlng = new google.maps.LatLng(-31.397, 150.644);
var mapOptions = {
zoom: 10,
center: myLatlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ''
});
}
/**
* Method for opening google at other tab, based on current location at map and zoom
*
*/
function openGoogleMap() {
// find out current zoom level
var zoom = map.getZoom();
// making the url
var url = "http://maps.google.com/maps/place/" +
map.getCenter().lat() + "," +
map.getCenter().lng() + "/#" +
map.getCenter().lat() + "," +
map.getCenter().lng() + "," +
zoom + "z";
// opening map in new tab
window.open(url);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="content">
<div id="map-canvas"></div>
<button onclick="openGoogleMap()" class="button">View on google maps</button>
</div>
CSS: (I tried to style the button to look like same as with Embed API).
html, body, #map-canvas, #content {
height: 600px;
width: 600px;
margin: 0px;
padding: 0px
}
.button {
padding: 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: white;
font-size: 12px;
font-family: Roboto, Arial;
color: #3a84df;
padding-bottom: 5px;
padding-left: 14px;
padding-right: 14px;
padding-top: 5px;
border: 1px solid #CCCCCC;
position: absolute;
cursor: pointer;
top: 4px;
left: 4px;
}
.button:hover {
text-decoration: underline;
}
For further reading:
Custom google controllers (How to make similar button than google uses).
How to construct google maps url
Cheers.
I am using zurb foundation orbit slideshow. The next and the prev buttons or links on the left and right edge of the page is the default black triangle. Please have a look at this test page:
http://www.endsnore.com/_test1b/index.aspx
How do I customize the next and prev buttons or links? How do I add my own arrow code: ‹ and › OR add my own custom arrow images
like these orange left and right arrows here:
http://www.getaveo.com/index.aspx
Please provide exact code example. I would appreciate it. Thank you very much in advance!
Working with orbit I found a pretty nice solution: using the :before on the .orbit-prev span and .orbit-next span tag via CSS you can modify the navigation buttons.
I do not think you can add images as button without editing the js code of the slider, but this solution works nicely, and you can obviously tweak it for your needs
See the jsFiddle here: http://jsfiddle.net/endorama/5SHz5/3/
Basically you need to add this CSS, which remove the arrows ( are borders on the span element ) and replace them with a gliph ( see the content: "..." )
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
Hope this helps, cheers :)
NOTE: Be aware that if stack_on_small is true you content will be stacked and the arrows hidden. I didn't tweak this behaviour because seems logical to me. just disable this option when you initialize Orbit to solve this problem.
My Dear friends! Please find complete solution for your troubles of ORBIT.
It takes 5 min to make custom buttons(image or chevron or font-"Font Awesome") as you navigation arrows.
In your js:
$(".next-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-next").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
$(".prev-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-prev").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
In your css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
.next-slide {/* PUT YOUR STyLES HERE*/}
.prev-slide {/* PUT YOUR STyLES HERE*/}
If you are using font awesom:
same js as above
css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
html:
<span class='prev-slide'><i class='icon-chevron-left'></i></span>
<span class='next-slide'><i class='icon-chevron-right'></i></span>
Thats it! Rank me if you like it!
I had success with stacey.mosier's answer and was able to change my arrows to an image using the CSS content property. Using Foundation v5.2.2
Approach #1
This is what working code for a single class looks like:
.orbit-next {
content: url("Homepage/Homepage_Banner_Arrow_Next_on_retina.png");
width: 16px !important;
height: 62px !important;
margin-right: 20px;
}
I set the width and height of the .orbit-next class to be equal to that of the image I'm adding.
And for the hover styling:
.orbit-container .orbit-next:hover {
content: url("Homepage/Homepage_Banner_Arrow_Next_off_retina.png";
background-color: transparent; //so there's no background effect
For .orbit-previous the rules are basically the same as above (except margin-right becomes margin-left and you use the prev arrow path instead of the next)
Approach #2
To stay DRY I instead implemented a "multiple selector" and now only need one arrow asset by rotating the current one via css transform
.orbit-next, orbit-prev { //All the above rules except the margin }
.orbit-next { margin-right: 20px; }
.orbit-prev { margin-left: 20px; transform:rotate(180deg); }
.orbit-container .orbit-next:hover, .orbit-container .orbit-prev:hover {
//the above hover rules
}
I anticipate the need to scale/hide the size of the arrows based on the column width currently active, something to consider, but beyond the scope of this question. Hope this helped!
Obrit comes with default classes. You can customize the classes:
<ul data-orbit data-options="next_class: my_next_class; prev_class: my_prev_class;">
...
</ul>
The default classes .next_class and .prev_class have a text-indent that is pushing the text out of the window.
If you are wanting to replace the content, use the css content: rule.
I think this is a little more straightforward:
For Foundation 5 - this is your jQuery:
$( "a.orbit-prev > span " ).replaceWith( "<img src='images/left_arrow.png' width='68' height='78' />" );
$( "a.orbit-next > span" ).replaceWith( "<img src='images/right_arrow.png' width='68' height='78' />" );
Replace the image URL with the URL of your own image, and the height/width of your own image height/width. To use a font icon, I would do something like this:
$( "a.orbit-prev > span " ).replaceWith( "<span><i class='icon-chevron-left'></i></span>" );
$( "a.orbit-next > span" ).replaceWith( "<span><i class='icon-chevron-right'></i></span>" );
You'll need to overwrite the default css styles too to use images:
.orbit-container .orbit-prev, .orbit-container .orbit-next {
text-indent: 0px !important;
line-height: 78px;
height: 78px;
width: 68px;
}
Keep the text indent at 0, and use your own heights/widths. For an icon font, I didn't try it but I think you should be able to use the existing CSS with no problem.
You'll probably want to remove the hover state as well, but maybe not:
.orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover {
background-color: transparent; }
Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/
I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.
I've seen solutions using JavaScript to set those values but I would really love to avoid them.
Lastly, I've seen a pretty good solution which is setting
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
This will create the desired behavior in most browsers... except for IE.
Any ideas?
EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.
You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width
Try display:inline-block;
here is the fix for ie:
display:inline-block;
zoom:1;
*display:inline;
If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
Note that width:1% is required to avoid cell collapsing.
If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.
#menu ul li {
float: left;
clear: none;
display: inline;
padding: 10px;
height: 25px; //how tall you want them to be
width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.
If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricks as this is their CSS.
Below is an example that includes vendor prefixes.
#menu{
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
<ul id="menu">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.
Here's what worked for me:
#menu{
height:31px;
width:930px;
margin:0 auto;
padding:3px 0px 0px 90px;
color:#FFF;
font-size:11px;
}
#menu ul{
display:inline;
width:930px;
margin: 0 auto;
}
#menu ul li{
list-style:none;
padding:0px 0px 0px 0px;
display:inline;
float:left;
width:155px;
}