I have some zoom buttons being added to my Map container
I want to remove these zoom buttons when a particular map image is being used
Code:
JS:
Map = function()
{
//private:
var $MapContainer;
this.initMap = function($container, zoomHidden)
{
$MapContainer = $container;
$MapContainer.append("<div class='MapImage'></div>");
if(!zoomHidden)
{
$MapContainer.append("<div id='mapZoomIn' class='MapZoomInButton'>+</div>");
$MapContainer.append("<div id='mapZoomOut' class='MapZoomOutButton'>-</div>");
}
}
this.setMapProperties = function(mapImage)
{
$('.MapImage').css('background-image','url("'+mapImage+'")');
// Where I want to remove the zoom buttons
if($('.MapImage').css('background-image') === "../images/mapImages/noZooMap.jpg")
{
$('.MapZoomInButton').remove();
$('.MapZoomOutButton').remove();
}
}
}
CSS:
.MapImage
{
position:absolute;
height:100%;
width:100%;
top:0;
right:0;
background-image: url("../images/mapImages/GenericMapImage.jpg");
background-repeat:no-repeat;
}
I'm not sure the proper way to "remove" the Zoom Buttons after I've appended them in a separate method, since the way I show you above is not functioning (the buttons are still present when running the program)
You could create a method within Map like this and use it when you want to remove the buttons.
Map = function() {
var $MapContainer;
this.initMap = function($container, zoomHidden) {
$MapContainer = $container;
$MapContainer.append("<div class='MapImage'></div>");
if(!zoomHidden) {
$MapContainer.append("<div id='mapZoomIn' class='MapZoomInButton'>+</div>");
$MapContainer.append("<div id='mapZoomOut' class='MapZoomOutButton'>-</div>");
}
}
this.removeZoomButtons = function ($container) {
$container.remove("#mapZoomIn");
$container.remove("#mapZoomOut");
}
this.setMapProperties = function(mapImage) {
$('.MapImage').css('background-image','url('+mapImage+')');
// Where I want to remove the zoom buttons
if($('.MapImage').css('background-image') === "url(../images/mapImages/noZooMap.jpg)") {
this.removeZoomButtons($MapContainer);
}
}
}
Is this line:
$('.MapImage').css('background-image','url("mapImage")');
exactly what you have in your code? If so, it's looking for an image at the literal URL "mapImage" rather than at the location specified in the mapImage variable.
Changing it to $('.MapImage').css('background-image','url('+mapImage+')'); should do the trick.
Related
So I want to add a function that when I click a div it moves, but when I click something else it moves back to its original position, I want to use gsap here too. I tried using an if else statement but I didn't know want to put in here(The part where there is two stars):
let btnSide1 = document.querySelector('.button-side-one'),
btnSide2 = document.querySelector('.button-side-two'),
btnTop = document.querySelector('.button-top'),
btnBig = document.querySelector('.button-big');
if (btnSide1 = **active**) {
gsap.to(btnSide1, .5, { x: 3 })
} else {
gsap.to(btnSide1, .5, { x: 0 })
}
here is the codepen link for this: https://codepen.io/sowg/pen/GRvQxpN
I figured this out I used toggle class list for this,
Here is how it works:
// Variables
btnSide1.onclick = function () {
btnSide1.classList.toggle("activex1");
};
.activex1 { left: 30vmin !important }
So when I click on the div it moves position
You have a typo.
if (btnSide1 === active)
var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');
var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');
termToggle.onclick = function toggleTerminal() {
if (terminal.classList.contains('hide')) {
terminal.classList.remove('hide');
if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
terminal.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
vncToggle.onclick = function toggleVNC() {
if (vncScreen.classList.contains('hide')) {
vncScreen.classList.remove('hide');
if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
vncScreen.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
.black-box {
background: black;
height: 500px;
width: 500px;
position: absolute;
}
.green-box {
background: green;
height: 500px;
width: 500px;
position: absolute;
}
.blue-box {
background: blue;
height: 500px;
width: 500px;
position: absolute;
}
.hide {
display: none;
}
<button class="button" id="terminalToggle" title="Toggle Terminal">Toggle terminal</button>
<button class="button" id="vncToggle" title="Toggle Terminal">Toggle vnc</button>
<div id='video' class="black-box"></div>
<div id='screen' class="green-box hide"></div>
<div id='terminal' class="blue-box hide"></div>
basically when you click "Toggle terminal" it should show blue and then if you click again go back to black; when you click "Toggle vnc" it should show green and then if you click again go back to black. If you click "Toggle vnc" and it is already blue, it should turn green and vice versa (but clicking "Toggle terminal")
I currently have the following Js:
var terminal = document.getElementById('terminal'); //video-like element
var vncScreen = document.getElementById('screen'); //video-like element
var video = document.getElementById('video'); //video-like element
var vncToggle = document.getElementById('vncToggle'); //button
var termToggle = document.getElementById('terminalToggle'); //button
termToggle.onclick = function toggleTerminal() {
terminal.classList.toggle('hide');
vncScreen.classList.toggle('hide');
video.classList.toggle('hide');
}
vncToggle.onclick = function toggleVNC() {
vncScreen.classList.toggle('hide');
terminal.classList.toggle('hide');
video.classList.toggle('hide');
}
and css:
.hide {
display: none;
}
When I had just two different HTML elements, this class toggling methodology worked. Now that there are 3, I'm not sure it will work as desired.
video is initially visible i.e. hide is not in its classList
terminal is initially hidden i.e. hide is in its classList
vncScreen is initially hidden i.e. hide is in its classList
When toggleTerminal() is called:
video becomes hidden
terminal becomes visible
vncScreen becomes visible (but it should not)
If toggleVNC() is called (after toggleTerminal()):
video becomes visible again (but it should not)
terminal becomes hidden
vncScreen becomes hidden
Note how if the either of the function calls were toggled only by themselves, this method would work (provided I removed vncScreen.classList.toggle('hide'); in toggleTerminal() and terminal.classList.toggle('hide'); in toggleVNC()).
The problem is I need to account for any order of button-presses of termToggle and vncToggle. Essentially my goal is to "cycle" these elements such that:
1) Toggling of the "selected" element (i.e. termToggle corresponds to visibility of terminal element && vncToggle corresponds to visibility of vncScreen element) hides the remaining two elements (video && vncScreen || terminal && video respectively)
2) The order of toggling of "selected" elements does not affect 1)
3) A second toggle of the "selected" element will hide itself and the other element that is not video
Any ideas on how to best accomplish this?
At one point I thought about doing some logic that evaluated whether hide was contained in the appropriate classList's and just manually add or remove the hide class accordingly but this seemed kind of sloppy to me (idk, maybe its not?).
See code snippet in question for functionality, Js redundantly posted here:
var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');
var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');
termToggle.onclick = function toggleTerminal() {
if (terminal.classList.contains('hide')) {
terminal.classList.remove('hide');
if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
terminal.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
vncToggle.onclick = function toggleVNC() {
if (vncScreen.classList.contains('hide')) {
vncScreen.classList.remove('hide');
if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
vncScreen.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
I have following code which works fine when the screen size is 770px and below (as determined by breakpoints):
var handleMatchMedia = function (mediaQuery) {
if (mediaQuery.matches) {
$j(".view-all a").removeClass("button");
$j(".view-all").removeClass("view-all");
} else {
$j(".view-all a").addClass("button");
$j(".view-all").addClass("view-all");
}
},
mql = window.matchMedia('all and (max-width: 770px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);
The problem is when the window is resized to 770px and up I lose my classes.
How to achive to change class on window resize?
You need to cache your selectors. See jsfiddle as well :
var viewAll = $j(".view-all")
, buttons = $j(".view-all a")
, handleMatchMedia = function (mediaQuery) {
if (mediaQuery.matches) {
buttons.removeClass("button");
viewAll.removeClass("view-all");
} else {
buttons.addClass("button");
viewAll.addClass("view-all");
}
}
, mql = window.matchMedia('all and (max-width: 770px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);
Guessing what you're going for is changing the design page when media changes, by adding classes.
Simply using css and media queries will achieve this:
#media all and (max-width: 770px) {
.viewall a {
color: blue;
}
}
but if you truly want it too be handled with javascript I'll recommend using another class as marker, like .adapt and changing the code to:
var handleMatchMedia = function (mediaQuery) {
if (mediaQuery.matches) {
$j(".adapt a").removeClass("button");
$j(".adapt").removeClass("view-all");
} else {
$j(".adapt a").addClass("button");
$j(".adapt").addClass("view-all");
}
},
mql = window.matchMedia('all and (max-width: 770px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);
I would suggest to save the needed classes in a data-770-classes attribute.
if (mediaQuery.matches) {
buttons.removeClass(buttons.attr('data-770-classes'));
viewAll.removeClass(viewAll.attr('data-770-classes'));
} else {
buttons.addClass(buttons.attr('data-770-classes'));
viewAll.addClass(viewAll.attr('data-770-classes'));
}
I assume $j creates a jQuery object.
The HTML would look like:
<div class="view-all" data-700-classes="view-all">...</div>
You can use element.className += "button" to add class and .className = ""to remove class, here's the code you need:
var viewAll = document.getElementsByClassName("view-all")[0];
var buttons = viewAll.getElementsByTagName("a");
var handleMatchMedia = function (mediaQuery) {
if (mediaQuery.matches) {
buttons.className += "button";
viewAll.className = "";
} else {
buttons.className += "button";
viewAll.className += "view-all";
}
}
var mql = window.matchMedia('all and (max-width: 770px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia);
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
I have the following code:
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'})
}
})
});
Click
Right now I have text "Click" to do this but instead I want to have a default image icon when it is clicked the code above will expand the div and when clicked again it will shorten it. how can I use two different images instead of "CLick"?
Create a sprite with your arrows, Add a class to your CSS that will change the background position on jQuery click. Than just toggleClass('opened')
LIVE DEMO
$(document).ready(function() {
$('.anchor_clicker').on('click', function(e){
e.preventDefault();
var $btn = $(this);
$btn.toggleClass('opened');
var heights = $btn.hasClass('opened') ? 930 : 100 ;
$('#desc').stop().animate({height: heights });
});
});
CSS:
a.anchor_clicker{
padding-right: 16px
background:url(http://i.imgur.com/u3GpDiC.png?1?1426) no-repeat right 0;
}
a.anchor_clicker.opened{
background-position: right -16px;
}
The good part on having a sprite instead of 2 separate images is the removal of an additional request for the new image on click, and the time gap that is created by that request in showing the loaded new image.
Very simply, do this:
(FIDDLE)
CSS
.anchor_clicker
{
background-image:url(/path/to/sprite);
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).css('background-position','-50px 0px');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).css('background-position','0px 0px');
}
})
});
For two images rather than a sprite:
CSS
.anchor_clicker
{
background-image:url(/path/to/image1);
}
.anchor_clicker.b
{
background-image:url(/path/to/image2) !important;
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).addClass('b');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).removeClass('b');
}
})
});
$('.anchor_clicker').click(function(){
$(this).find('img').prop('src', function(src) {
return src === 'img1' ? 'img2' : 'img1'
})
})
You could change the src property of the image on the fly, based on the src. This is if you want to swap 2 different images.
But if you have a sprite with different images , then manipulating class is the way to go.