I am trying to change a menu from a list to a dropdown.
I am using the Mapplic - Custom Interactive Map WordPress Plugin
I found the code for it, but I don't seem to get it to
this.addLevelSwitcher = function() {
if (self.data.levels.length > 1) {
var control = $('<div></div>').addClass('mapplic-level-switcher');
self.data.levels.forEach(function(level, i) {
var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) {
e.preventDefault();
self.switchLevel(level.id);
});
if (level.show) button.addClass('mapplic-selected');
});
this.el.append(control);
self.el.on('levelswitched', function(e, target) {
$('button', control).removeClass('mapplic-selected');
$('button[data-level="' + target + '"]', control).addClass('mapplic-selected');
});
}
}
Also here is the css
/* new switcher */
.mapplic-level-switcher {
position: absolute;
right: 0;
top: 0px;
margin: 12px;
}
.mapplic-level-switcher button {
background-color: #f8f8f8;
border-radius: 0;
color: #888;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 600;
line-height: 20px;
padding: 4px 10px;
text-align: center;
user-select: none;
width: 100%;
border: none;
transition: transform 0.2s;
position: relative;
}
.mapplic-level-switcher button:hover { background-color: #f8f8f8; }
.mapplic-level-switcher button:focus { outline: none; }
.mapplic-level-switcher button.mapplic-selected {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
background-color: #fff;
color: #222;
transform: scale(1.15);
z-index: 100;
}
I am trying to make it more responsive on mobile...
Another thing I was thinking was to hide this menu on mobile and add indiviuals buttons in order to trigger the floor plan.
Any ideas on how could I do any of this?
Thanks
Related
i'm making a webpage where I have different "pictures" that I want like buttons on and when people like it, the number stays and then they can only like each image once. I found a code that I liked however when I refresh the page, all the likes go away. I want them to stay. I'm not the best at explaining or understanding lol.
Here's the code that I found that I liked, but I want to function as it goes away when I refresh. Function like a "vote" button.
/*
* Love button for Design it & Code it
* http://designitcodeit.com/i/9
*/
$('.btn-counter').on('click', function(event, count) {
event.preventDefault();
var $this = $(this),
count = $this.attr('data-count'),
active = $this.hasClass('active'),
multiple = $this.hasClass('multiple-count');
// First method, allows to add custom function
// Use when you want to do an ajax request
/* if (multiple) {
$this.attr('data-count', ++count);
// Your code here
} else {
$this.attr('data-count', active ? --count : ++count).toggleClass('active');
// Your code here
} */
// Second method, use when ... I dunno when but it looks cool and that's why it is here
$.fn.noop = $.noop;
$this.attr('data-count', ! active || multiple ? ++count : --count )[multiple ? 'noop' : 'toggleClass']('active');
});
html {
background: #f5f5f5;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
margin: 30px auto 0 auto;
width: 450px;
font-size: 75%;
}
h3 {
margin-top: 30px;
font-size: 18px;
color: #555;
}
p { padding-left: 10px; }
/*
* Basic button style
*/
.btn {
box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
border-radius: 3px;
border: 1px solid;
display: inline-block;
height: 18px;
line-height: 18px;
padding: 0 8px;
position: relative;
font-size: 12px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
* Counter button style
*/
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
border-radius: 3px;
border: 1px solid #d3d3d3;
background-color: #eee;
padding: 0 8px;
color: #777;
content: attr(data-count);
left: 100%;
margin-left: 8px;
margin-right: -13px;
position: absolute;
top: -1px;
}
.btn-counter:before {
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
background-color: #eee;
border: 1px solid #d3d3d3;
border-right: 0;
border-top: 0;
content: '';
position: absolute;
right: -13px;
top: 5px;
height: 6px;
width: 6px;
z-index: 1;
zoom: 1;
}
/*
* Custom styles
*/
.btn {
background-color: #dbdbdb;
border-color: #bbb;
color: #666;
}
.btn:hover,
.btn.active {
text-shadow: 0 1px 0 #b12f27;
background-color: #f64136;
border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
color: #b12f27;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
<h3>Basic button</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter - active/inactive</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter for people who likes to click</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
You actually need back-end for this, but this is a quick solution.
NOTE: the code will not work in the snippet but it regularly works
W3: Window localStorage
Mozilla Window.localStorage
let btn = document.querySelector('#like');
let result = document.querySelector('#result');
localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');
btn.addEventListener('click', addLike());
function addLike(){
localStorage.setItem('likes', parseInt(localStorage.getItem('likes')) + 1);
result.innerHTML = localStorage.getItem('likes');
}
<button id="like">LIKE</button>
<p id="result"></p>
to see the local storage, go to DevTools open application tab, see the local storage there and you can manage it manually
Hi I am trying to figure out how to display images when clicked on a section on my bar. So far I have a working animation to switch between sections but I would like to display images under it. It's my first time doing this so I absolutely don't know how to do this and would very much appreciate the help.
var indicator = document.querySelector('.stefan-indicator');
var items = document.querySelectorAll('.stefan-item');
function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}
items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
.stefan {
margin-top:4%;
display: inline-flex;
position: relative;
overflow: hidden;
max-width: 100%;
background-color: inherit;
padding: 0 20px;
border-radius: 40px;
/* box-shadow: 0 10px 40px rgba(159, 162, 177, .8); */
display: flex;
justify-content: center;
}
.stefan-item {
color: #252525;
padding: 20px;
text-decoration: none;
transition: 0.3s;
margin: 0 6px;
z-index: 1;
font-family: 'Open sans', sans-serif;
position: relative;
cursor: pointer;
font-weight: 500;
}
.stefan-item:before {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 5px;
background-color: #ffb833;
border-radius: 8px 8px 0 0;
opacity: 0;
transition: 0.3s;
}
.stefan-item:not(.is-active):hover:before {
opacity: 1;
bottom: 0;
}
.stefan-item:not(.is-active):hover {
color: #ffb833;
cursor: pointer;
}
.stefan-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
transition: 0.4s;
height: 5px;
z-index: 1;
border-radius: 8px 8px 0 0;
}
<div class="stefan">
<a class="stefan-item is-active" active-color="#ffb833">Section1</a>
<a class="stefan-item" active-color="#ffb833">Section2</a>
<a class="stefan-item" active-color="#ffb833">Section3</a>
<a class="stefan-item" active-color="#ffb833">Section4</a>
<a class="stefan-item" active-color="#ffb833">Section5</a>
<span class="stefan-indicator"></span>
</div>
If what you are trying to do is build tabs component you need to create elements for every tab that are hidden by default and only are displayed when your code tells it to.
So when stefan-item with section1 content is clicked, your javascript should tell stefan-content-1 to change it's style to display:block (by directly changing style or adding class).
You can have a look here: https://web.dev/building-a-tabs-component/ or use a ready made component. Bootstrap, Material UI and other systems have tabs for the taking.
I want to apply different width in different option menu but when page load my js is run and take default 25% width in all page option menu I need 25% width in header file and header include in all file so header first js is run and page option menu take also 25% width so what i do for assign different width in header and also page
he my js and css is given and I try to apply inline css it's not working and also make different class and different js but its also not working because first run header js and it's width 25% so what I do for solve this issue.
This one is my js file:
! function(t) {
var e = t('<div class="stb-select-container"><span class="selected"></span></div>'),
n = t('<ul class="stb-select" style="display:none;"></ul>');
t.fn.stbDropdown = function() {
var i = t(this);
i.hide(), i.each(function(i, a) {
var o = e.clone(),
s = n.clone(),
r = t(a),
c = r.find("option");
r.after(o), r.appendTo(o), s.appendTo(o), c.each(function(e, n) {
var i = t(n),
a = t("<li></li>"),
o = i.prop("attributes");
a.prop("attributes", o), t.each(o, function(t, e) {
a.attr(e.name, e.value)
}), a.append(i.text()), s.append(a)
});
var l, p = r.children("option").filter(function(e, n) {
return t(n).is("[selected]")
});
l = 0 == p.length ? c.first() : p.first(), o.find(".selected").text(l.text()), o.on("click.stb.select", function() {
var e = t(this),
n = t.grep(t(".stb-select-container"), function(n) {
return !e.is(t(n))
});
t(n).find("ul").hide(), e.find("ul").toggle()
}), o.on("click.stb.option", "li", function(e) {
e.stopPropagation();
var n = t(this),
i = n.parents(".stb-select-container"),
a = i.find("span.selected");
a.text(n.text()), n.parents("ul").toggle();
var o = i.find("select");
o.val(n.attr("value")).change(), n.siblings().removeAttr("selected"), n.attr("selected", "selected")
}), r.on("DOMNodeInserted", function(e) {
var n = t(e.target);
if (n.is("option")) {
var i = t("<li></li>"),
a = n.prop("attributes");
i.prop("attributes", a), t.each(a, function(t, e) {
i.attr(e.name, e.value)
}), i.append(n.text()), s.append(i)
}
}), r.on("DOMNodeRemoved", function(e) {
var n = t(e.target);
n.is("option") && s.find("li:contains('" + n.text() + "')").remove()
})
})
}
}(jQuery);
.stb-select-container {
font-family: inherit;
/*border-radius: 4px;*/
width: 25%;
/*width: 100%;*/
display: inline-block;
outline: 0;
box-shadow: none;
border-right: 1px solid #ccc;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 14px 16px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
.stb-select-container ul {
list-style-type: none;
margin: 0;
padding: 0
}
.stb-select-container select {
display: none
}
.stb-select-container .stb-select {
position: absolute;
background: white;
left: -1px;
top: 50px;
padding: 8px 16px;
border: solid thin rgba(0, 0, 0, 0.24);
border-top: 0;
z-index: 10;
max-height: 200px;
width: 100%;
overflow-x: auto;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px
}
.stb-select-container span {
opacity: .54
}
.stb-select-container::after {
opacity: .54;
content: "v";
position: absolute;
right: 8px;
-ms-transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
.stb-select-container .stb-select li {
opacity: .7
}
.stb-select-container .stb-select li:first-of-type {
/* opacity: .34*/
}
.stb-select-container .stb-select li+li {
margin-top: 10px
}
.stb-select-container .stb-select li:hover{
color:#3EA9D8;
}
#media screen and (max-width: 768px) {
.stb-select-container {
font-family: inherit;
font-size: 16px;
/*border-radius: 4px;*/
width: 100%;
display: inline-block;
outline: 0;
box-shadow: none;
border: 2px solid #e9e9e9;
/*border: solid thin rgba(0, 0, 0, 0.24);*/
padding: 12px 12px;
/* margin: 4px 8px;*/
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
text-align: left;
cursor: pointer
}
}
this one is my html code
<select name="city" id="city_result" style="height: 50px; width:100%; margin: 0px; padding: 10px; box-shadow: 0px 0px 0px white; border: none;">
<option>Your city</option>
</select>
Am I right in guessing you are using this:
http://www.jqueryscript.net/form/Nice-Clear-Dropdown-List-with-jQuery-and-CSS-stb-dropdown.html
There is no reason why on a page you cannot override the CSS of "width:200px or in your case "width:25%;" with inline CSS or additional styles added.
You need to identify where your problem actually is. First hard code in the container a hardcoded width. Then, if it works, put it into a CSS class and see if it is being applied. Then, if it works, you can choose to implement this in JS, or with additional styling for that page, or in any way you choose really.
There are simply too many ways to achieve what you want, but the method you employ depends entirely on you, your system, your methodology and your project guidelines/objectives.
The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle
Goal:
When you click on the button with icon reading-glass a, a text field should be entering from right to left.
After you have pressed the button, the cursor should be located in the text field and to be ready to retrieve input data and a color frame around the button for instance yellow should appear.
When you use to the curser outside of the text field and suddently you press the left button of your mouse, the text field and the yellow color around the button should disappear.
Problem:
I do not now how to create it.
Info:
*I'm using bootstrap and jQuery.
*Today, I do not have a available sourcecode.
What you need is two actions on your button:
show the input field
fire the form
The code below does that. The input will have a zero width on page load. The jQuery functions binds a click event on the button.
When it's clicked it will look if the input field has a width. When not, it will prevent the default action (submitting the form), and instead animates the input to a width of 200px. After that it focuses on the field.
The second time you click on the button, the input won't have zero width, so the buttons acts normal and will submit the form.
Hope it suits you.
$(function() {
$('#search-form button').on('click', function(e) {
var btn = $(this);
var inp = $(this).parent().find("input");
if( inp.width() == 0 ) {
e.preventDefault();
inp.animate({width: "200px"}, 500).focus();
btn.addClass('active-btn');
}
});
});
* {
box-sizing: border-box;
}
body {
background: black;
}
#search-form input {
color: #fff;
height: 50px;
background: #484848;
border: 0;
float: right;
width: 0;
}
#search-form button {
background: #484848;
color: #fff;
width: 50px;
height: 50px;
border: 1px solid #484848;
float: right;
}
#search-form .active-btn {
border: 1px solid #57ABD9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
<button type="submit">🔎</button><input type="text" name="search" />
</form>
I hope something like this:
Note - It is responsive too
DEMO and FULL SCREEN DEMO
HTML
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." type="search" value="" name="search" id="search"/>
<input class="sb-search-submit" type="submit" value=""/>
<span class="sb-icon-search"><i class="glyphicon glyphicon-search"></i></span>
</form>
</div>
CSS [if needed]
body{
margin: 40px 60px;
background:#555;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(e){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
$('.sb-search-input').focus();
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
$('.sb-search-input').blur();
isOpen = false;
}
});
});