So I have been working with Google maps for quite some time now but I am stuck at a point. I have a container div in which I am rendering my map but initially its display is none. I have a floating button and I want that on its click the container's display should change to block and it should trigger the fullscreen event so the map is displayed in full screen. So far I have done this:
// html for map
<div id="searchMap" class="search-map">
<div class="embed-responsive">
<div id="searchViewMap" style="height: 540px;"></div>
<div id="restaurant-label" class="restaurant-info-container-search"></div>
</div>
</div>
initially div with id="searchMap" has display: none
// html for button to show the map
<img src="{{asset('/images/map_button.png')}}" class="content-section__map-button" onclick="showMobileMap()">
That is an image button.
// JavaScript method onclick of the button
function showMobileMap() {
$('#searchMap').css('display', 'block');
$('#searchViewMap div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
}
Now the problem that I am facing is that when I click the button for the first time it displays the container with the map but it doesn't make it full screen. And when I click the button again it makes it full screen. I don't know why this is happening but I want that the map renders full screen on the first click.
try to change :
<div id="searchViewMap" style="height: 540px;"></div>
to
<div id="searchViewMap" style="width: 100%; min-height: 100vh;"></div>
or add css :
#searchMap {
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index: 2;
}
Related
The issue
https://streamable.com/e/9z6lev (the flickering in the video is caused by the overlay being reopened every time meal plan is selected)
It "feels" like during the initial overlay open it's not the focused element and as result is's children can be clicked through :sad:
Overlay Template
The logic for the overlay is quite simple, and allow to nest any type of content inside:
<template>
<div class='swipeableWrapper'
#click.stop.prevent // not original code, just attempt to fix the issue
#touch.stop.prevent> // not original code, just attempt to fix the issue
<slot />
</div>
</template>
.swipeableWrapper {
height: 100%;
left: 0;
min-height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
Items List Template
<template>
<div>
...
<ListProduct v-for='(product, index) in products'
...
:showProduct='showProduct'
:key='index' />
</div>
<template>
// List Item
<template>
<div class='listProduct'
...
#click='showProduct'>
...
</div>
</template>
Intended approaches:
The following logic added to the overlay template to prevent events from bubbling:
#click.stop.prevent
#touch.stop.prevent
Global logic that will listen to opened overlay and add the following CSS class to the body element, in order to allow click on the overlay items, but still not much luck
.overlayOpened {
& * {
pointer-events: none;
touch-action: none;
}
.swipeableWrapper {
&,
& * {
pointer-events: auto;
touch-action: auto;
}
}
}
I am a bit puzzled with this dark magic behaviour and will really appreciate your opinion on the origin of the behaviour and possible solutions :bow:
Try this
#click.self.prevent="function"
Edited:
For the list item and function as prop
:showProduct="() => showProduct(item/index)"
Say I have a blank page and a button (somewhere in the top right corner). When I click that button I want to be able to create a square on the page (A contact card). And when I click it again I want to be able to create another card next to it with the same dimensions and so on (i.e every click adds a card till theres 4 in a roll then starts on the bottom of the card untill whole page is filled).
I am unsure on how I can accomplish this. I know how to insert a button and a click event just not sure how I can structure this. Would I need to use flex?
Thanks in advance,
I am trying to visualize how I can tackle this problem.
Would I need to use flex?
In 2016, flex would be the best way to approach creating horizontal rows, each containing 4 equal-width elements, yes.
But if you want a legacy-browser solution, you can also use
display: inline-block;
float: left;
width --px;
and a container with an explicitly specified width which means that every :nth-of-type(4n+1) element will start on a new row.
For instance:
.card {
display: inline-block;
float: left;
width: 100px;
margin: 12px;
}
means each card requires 124px of space (12px + 100px + 12px).
So if you give the .card-container an explicit width of 4 x 124:
.card-container {
width: 496px;
}
then after every 4 cards, the next card will begin on a new row.
Here's a quick prototype using jQuery and Twitter Bootstrap.
When pressing the button, the first card with class card-hidden is shown and has it's card-hidden class removed. The next button press will show the next card until there's no cards left.
HTML
<html>
<body>
<button id="button">Add</button>
<div class="container">
<div class="row">
<div class="card card-hidden col-xs-3">1</div>
<div class="card card-hidden col-xs-3">2</div>
<div class="card card-hidden col-xs-3">3</div>
<div class="card card-hidden col-xs-3">4</div>
</div>
</div>
</body>
</html>
CSS
.card {
height: 200px;
}
.card-hidden {
display: none;
}
JS
$("#button").on("click", function(e) {
if ($(".card-hidden").length > 0) {
$(".card-hidden").first().slideToggle(function() {
$(this).removeClass("card-hidden");
});
} else {
console.log("No more cards to show.");
}
});
I'm trying to add an image over some text that I have. This is similar to retailmenot.com's reveal coupon code. When a user clicks on the image the image is removed and reveals the text underneath while simultaneously linking the user to an external url.
The base layer can be as follows:
<div class="base">
<h3>Some text</h3>
</div>
I want to load an image with the following over it when the text is clicked:
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
The height of the base layer with class "base" is variable, so the image has to be resized to fit it. I have a working example where I place the image and then resize it, but this creates issues when javascript may not be enabled as the image fails to be resized and looks messy. I want the script to fall back to just showing the underlying text if javascript is disabled.
How can I add and automatically resize such an overlay on page load using jquery or javascript?
You can do it like this:
$(document).ready(function () {
//Set overlay position and dimension to same as base
$base = $(".base");
$overlay = $(".overlay");
$overlay.offset($base.offset());
$overlay.height($base.outerHeight());
$overlay.width($base.outerWidth());
$overlay.show();
//Hide overlay on click (show hidden text)
$(".overlay").click(function () {
$(this).fadeOut();
});
});
and with css:
.overlay{
/* Hide overlay if no js */
position: absolute;
display: none;
}
Check it out here: JSFiddle
If you can have the overlay in the base, as such:
<div class="base">
<h3>Some text</h3>
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
</div>
You can css this, no need for javascript:
.base{
position: relateive;
}
.overlay{
position: absolute; /* or fixed if scrollbars involved */
display: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* or replace right and bottom with: */
/* width: 100%;
height: 100%; */
}
You can now use javascript to toggle visibility:
$('.overlay').fadeIn();
Let your html page has this following code
<div class="base">
</div>
Don't place any code about your image in html page. And then in your jQuery code.
var img = '<img src="http://example.com/image.jpg"/>';
var txt = 'Some text';
$(document).ready(function(){
$(this).find('.base').html(txt).show();
$(this).find('.base').click(function(){
if($(this).html() == img)
$(this).html(txt).show();
else
$(this).html(img).show();
});
});
This will solve your issue.
I'm having this problem to solve for weeks now and really need help.
I have this system where a user selects a template with 2 types of areas. One for inserting images and one for inserting text.
Each template may come with numerous areas to insert images and each image area is just a div with it's own dimensions [width px - height px] within a limited area of 800px - 650px.
I will call this div to receive images div.img
Inside that div.img theres an input type="file" and throw jquery.form.js plugin I'm able to insert a new image into it.
I will call the inserted image new.img
This new.img comes wrapped in a div div.newImg because I had to have a button to delete the image on top of the image itself.
I'm using jquery ui draggable and resizable so the div.newImg may be resized and dragged inside of div.img.
Here are the different elements: div.img -> div.newImg -> new.img + button delete
HTML
<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
<div class="imgh ui-resizable ui-draggable" alt="reset3" style="height: 100%; width: 204px;">
<img src="###" style="width:inherit; height:inherit; min-width:50px; min-height:50px;" class="img_set">
<div class="close"><i class="icon-remove-sign"></i></div>
</div>
</div>
JQUERY
$('.imgh').resizable({ containment: $(this).closest('.child') });
$('.imgh').draggable({ containment: $(this).closest('.child'), scroll: true, snap: true, snapTolerance: 5 });
This is what I've manage to approach so far but doesn't help me at all
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width($('.imgh img').width());
}else{
$('.imgh').width('100%');
$('.imgh').height($('.imgh img').height());
}
I've managed to have the img.img_set have the same dimensions as it's parent by having style="width:inherit; height:inherit;".
What I need is a way for the div.imgh to have the same dimensions as it's inner img.img_set. Like a reversed inherit.
UPDATE
This code does what I want but my problem is that everytime I resize it comes back to what I've defined in the initialization:
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width('auto');
}else{
$('.imgh').width('100%');
$('.imgh').height('auto');
}
if($('.imgh').width() > $('.imgh img').width()){
$('.imgh').width($('.imgh img').width());
}
Is there a way for this to only happen once to each div.imgh?
You could use .bind() to resize it it every time something changes...
$('.imgh').bind('resize', FullWidthHeight); //Note: check the 'resize' event is relevant to imgh
function FullWidthHeight() {
$('.imgh').css('height', img.img_set.height());
$('.imgh').css('width', img.img_set.width());
}
I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.