Bootstrap Tour targets and modals not displaying (Leaflet maps) - javascript

Demo
Codepen
PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR
Desired Outcome
The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.
What I'm getting
Ignore the difference in red button compared to image above, content doesn't matter
Problem
When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.
The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.
Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.
Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.
What I've tried
Tour code
//Bootstrap tour
function takeTour() {
console.log("Taking tour");
("use strict");
// Instance the tour
var tour = new Tour({
name: "leafletTour",
storage: false,
steps: [
{
element: "#custom-control",
title: "One Stop Tour",
content: "There is only one stop in this tour",
placement: "right"
}
],
backdrop: true
});
tour.init();
tour.start(true);
}
My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101
I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.
I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important
Any ideas/advice would be great.

I have reviewed your code, its really strange but i have found one solution :
Just add class
.fade{
opacity:1 !important;
}
Here you can find working example.
https://codepen.io/anon/pen/MveMrL

Related

Positioning button inside leaflet layer control

I'm using the leaflet styled layer control plug in to customize my map control.
I'm trying to add a button to the top right corner of my controls that closes the controls (primarily for mobile use).
I found this question and it works, but now I'm wondering how I can position this button. I want it to be in the top right corner of the control.
When I position the class "leaflet-control-close" it works (I tested with "position: relative; float: right;" and it did float right but stayed at the bottom), but if I give it an absolute position at the top of the page it seems to be appear behind my overlays.
I want it to push down the overlays a little bit so that it doesn't overlap.
EDIT: here is a jsfiddle showing what's happening. It's a little convoluted because the styled layer control files don't have a CDN so I just pasted in the CSS and javascript. I made a note where I add the button in the original Javascript, and below that JS is the JS to create the map and overlays.
I know the button on a desktop is kind of annoying because when you close the control with it, it immediately pops back open because your mouse is hovering. In my actual code I've set the display to none if the screen width is larger than tablet size, because that's the only time I feel like I need the button.
I customized the styled layer control javascript in order to include the button:
L.Control.StyledLayerControl = L.Control.Layers.extend({
onAdd: function(map) {
this._initLayout();
this._update();
this._addButton();
map
.on('layeradd', this._onLayerChange, this)
.on('layerremove', this._onLayerChange, this);
return this._container;
},
_addButton: function () {
var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
var button = L.DomUtil.create('button', 'layer-control-close', elements[0]);
button.innerText = 'Close control';
L.DomEvent.on(button, 'click', function(e){
L.DomEvent.stop(e);
this._collapse();
}, this);
}
)};

Scrollmagic .to() not working on Fullpage in Wordpress

I'm having problems changing the background color of an element (".background") using Scrollmagic. I've successfully changed other elements background colors, but this specific one has defeated me. Here is the scenario:
When a user scrolls down to or clicks on the "Studios" navigation link some of the elements will change background colors (most of them work already). I'm specifically trying to change the background color of the "tooltips." These are the boxes that appear if you hover over the navigation dots on the left (there are 5 currently) or top (currently 2 on the Studios section). Each of these tooltips has the "background" class.
When you first load the page and hover over the top dot on the left you should see "Expedition" pop up in a purple box. When you scroll down to Studios it should change this box and others like it to a red box. It doesn't.
Here is a link and relevant code.
Link to live example
Warning This is a work in progress. Ignore the fact that a lot of other things don't work. This definitely won't work on mobile or small-width devices.
//Studios
var redBG = '#7d1217';
var redLight = '#7d3537';
var redNav = '#fc1925';
function tooltipStudios() {
jQuery(".backdrop").css({"backgroundColor" : redBG})
}
//Create Studios Timeline
var studiosColor = new TimelineMax()
.to('#site-header-menu', 0.3, {backgroundColor: redLight})
.to('#wpfp-navmenu', 0.15, {backgroundColor: redBG})
.to('#fp-nav ul li a span', 0.3, {backgroundColor: redNav})
.to('#secnav-studios span', 0.15, {backgroundColor: redLight})
.to('.dropdown-content li', 0.05, {backgroundColor: redBG})
.to('#colophon', 0.3, {backgroundColor: redBG})
.to('.background', 0.15, {backgroundColor: redBG});
// Studio Scene
var studiosScene = new ScrollMagic.Scene({
triggerElement: '#slide-studios',
offset: 200
})
.setTween(studiosColor)
.addTo(controller);
I've been trying to narrow down what is preventing it from triggering and so far here is what I can think of:
The Fullpage plugin has a default setting for color (right now it is the purple) and is preventing any changes somehow. The css it includes is a style tag with ID "wpfp-dynamic-css"
.to() isn't the right action to use in the tween. This is my first time using Scrollmagic so I'm learning as I go.
I wanted to see if there were other ways to change the tooltip color successfully and I was able to. You'll notice in the code block i included i have a function called tooltipStudios(). If I use this function as a call() in the tween it will successfully change the color (you can see an example if you go down to the Agency section. It will change the tooltip bg to #000000). However, the color won't change back if you scroll back up to any section like the colors of other elements do when I use .to().
I'm completely stumped at this point. Here is a quick list of some of the relevant plugins/scripts that you may need:
Wordpress (up to date at the time of writing)
WP Fullpage plugin (incorporates fullpage.js)
Scrollmagic (up to date at the time of writing)
Please feel free to ask for any other information/code and I'll supply it.
Thanks in advance to anyone willing to tackle this!
If you read fullPage.js FAQs you'll find the answer in this questions:
jQuery scrollTop function doesn't work
jQuery scroll event doesn't work
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

Overlapping tooltip in Extjs Grid

I have an issue that I’ve been trying to resolve. I’m very new to Sencha ExtJS. I’ve included image links to assist my explanation.
I have a Tooltip that displays “Double-click to Configure” when you move your MouseOver the header of a table which works fine.
Shown here: http://img227.imagevenue.com/img.php?image=952843717_Header_122_41lo.jpg
Also
I have a Tooltip that displays “Show Available Options” when you move your MouseOver the gear icon.
The problem is that the gear icon is within the header so when you mouseover the gear icon, the header tooltip also displays displays. Shown here
http://img157.imagevenue.com/img.php?image=952937141_Config_122_421lo.jpg
I really don’t know how EXTJS renders it’s grid but is there a way for me to place the gear icon outside of the header or not display the “Double-click to Configure” Tooltip when a user mouseovers the gear icon?
I’m Not sure where to look in the code I have a file uiconstant.js that creates all the UI constants in a Static class
UIElements:
{
SIMULATION_GRID: 'simulationgrid',
REPORT_SCHEDULER: 'reportscheduler',
BLENDED_BENCHMARK: 'blendedBenchmark',
BLENDED_BENCHMARK_GROUPINGS: 'blendedBenchmark_groupings',
DEFAULT_CONTAINER_LABEL: 'Click to configure container',
EDIT_CONFIGURE_CONTAINER_LABEL: 'Click to edit configuration',
DO_NOT_REQUEST_CONTENT_LABEL: 'Automatic calculation off for this dashboard.',
NO_RECORDS_FOUND: '<div class="no-records-found">No records found</div>',
CONTAINER_PANEL: 'containerPanel',
DoubleClickToConfigure: 'Double-click to Configure'
}
I also have a ContainerPanel.js File that Represents the custom panel for the container.
Not sure if I am looking in the correct files to make this change or update the grid
Ext.create('Ext.tip.ToolTip', {
target: header,
html: UiConstant.UIElements.DoubleClickToConfigure
});
Tooltip is supported for tools so you can configure the gear with a tooltip text. Now, header does not directly support tooltips - you handle it above by creating one and setting its header.
Let's try a bit different approach: tooltip on gear tool is de facto quicktip - only one instance of quicktip exists at a time.
To create quicktip for the header do this:
panel.getHeader().getEl().set({'data-qtip':'Your text here'});
Note: There shall always be an area around the gear tool where the tooltip changes - not sure if it is acceptable for your use case. Nevertheless, two tips shall not appear.

Bootstrap Modal Changes Size After Hide/Reopen

I'm having a very frustrating issue with a Bootstrap Modal (Bootstrap 2.3.2) that I'm using for a file upload window. It is probably important to note that this is a nested modal, but this is the only instance that I'm having this automatic re-size issue. I have 6 other secondary modals that open from the primary Product Editor modal that are not resizing after they open/close.
Its also worth noting, that on the other modals that are not having this resize issue, they are not being assigned a custom width value.
Here are two images, the first is the first time I open the modal, the second is after it calls modal('hide') and then is opened again with modal('show');
http://i.imgur.com/2cj2k2I.png (first open) http://i.imgur.com/bDIa2mp.png (second open)
This is the creation code:
$('#mediaModal').modal({
show: false,
keyboard: false,
width: '60%',
maxHeight: '600px',
backdrop: 'static'
});
You'll notice in the screenshots that it is sitting over the larger product editor modal. Once an upload is complete, or the cancel button is clicked, (or the upload button is clicked and there are no files to upload), it simple calls:
$('#mediaModal').modal('hide');
On the primary modal, it simply calls $('#mediaModal').modal('show'); each time the 'Upload Media' button is clicked.
To combat this, I have tried to manually adjust the main modal css width before it is shown, like this:
$('#mediaModal').modal().on('show', function() {
$(this).find('.modal').css({
width: '60%'
});
});
This should make sure the primary modal windows width stays at the original definition of 60%. However, it makes no difference. The first time the modal is open, it represents 60% of the screen in width. Any subsequent openings, it has shrunk down in size. It doesn't continue to shrink after the first hide, but neither can I get it to retain the original desired width.
One last note - it is only changing the width, probably because this is a percentage value.
Thanks for any help! I'm really not that good at CSS so I'm guessing you CSS wizards will know whats happening almost immediately! If I haven't provided enough information please just leave a message and I'll add to this post.
(Note: Upgrading to BS 3 is just not an option, the code base would take weeks to clean up)

jCarousel display nothing if only one item

I've developed one page using jCarousel within jQuery ui Tabs.
Following page is what I got:
http://knowledge.teldap.tw/knowledgeFB/my_creation/?fid=668330535
Problem is:
If you click the 3rd tab (only one item), you'll find nothing unless you click the left arrow to navigate. It's weird because one the 1st tab ( more than one items) everything is normal and visible.
Can anyone find out what I've missed? Because I've struggled on this for several hours.
Thanks!
The problem is the width of your carousel image has not been adjusted properly
In your jquery,put scroll 1
jQuery('#listelements').jcarousel({
scroll : 1,
And also adjust the height of the container
.jcarousel-skin-tango1 .jcarousel-container-horizontal {
width: 1200px;
height:630px;
margin-left://adjust margin left here
}
You may have a look on this carousel example

Categories