I've done a customized select with Jquery. I've put a triangle FontAwesome icon floating to the right. The problem is when I try to click in the icon the mouse pointer doesn't let me click. The space occupied by the icon is not able to be clicked. I wonder how could I fix this or if is possible with css.
This is my code
$(function() {
$('select').selectmenu();
});
.main-search-results:after {
content: "\f0dd";
font-family: 'FontAwesome';
padding-left: 4%;
border-left: 1px solid $text-color;
position: absolute;
top: 4px;
right: 15px;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="main-search-results">
<select name="" id="select-filter-1">
<option value="default">Cualquier provincia</option>
<option value="a_coruña">A Coruña</option>
</select>
</div>
Here you go,
I have created fiddle for you so take a look what I did here..
http://jsfiddle.net/mkdizajn/jsxuvkn6/
.w{
position:relative;
}
.ui-selectmenu-button::after {
content: "\f0dd";
font-family: 'FontAwesome';
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
}
.ui-icon{
display:none;
}
I attached the FA icon on to generated jqueryUI item..
removed (display: none) the initial dropdown
I now can click on that triangle,, test it to see if that works for you
hth, k
Related
I have made a "scroll to top button" only using Html and CSS. It works perfectly.
The only problem is it also doesn't appear on mobile phone. I want to fix that. I also want it to display after certain pixels and even want to make it stay when the footer is displayed otherwise it hides behind the footer.
Html:
<!---Scroll to the top button-->
<section class="scroll">
</section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>
<!--End of scroll to the top button-->
CSS:
.gotopbtn{
.gotopbtn{
position: fixed;
width: 50px;
height: 50px;
background: var(--lightersg);
bottom: 16px;
right: 2px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
}
#media only screen and (max-width: 600px) {
#scroll {
display: none;
}
}
How to display this button on mobile phone? I tried using #media but it doesn't work.
I also tried display:flex but the button vanishes
I use javascript for showing button after scroll 32px
in such a way that I add a scroll event that I recognize the scroll and with a condition I recognize if scroll go over that 32px add .show class and otherwise remove .show class
HTML
<!-- height: 200vh; is just for create scroll in page -->
<section class="scroll" style="height: 200vh;"></section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i></a>
CSS
.gotopbtn {
position: fixed;
width: 50px;
height: 50px;
background: var(--lightersg);
bottom: -66px;
right: 2px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
transition: all 0.3s;
}
.gotopbtn.show {
bottom: 16px;
}
JS
let gotopbtn = document.querySelector('.gotopbtn');
window.addEventListener("scroll", (event) => window.pageYOffset >= 32 ? gotopbtn.classList.add('show') : gotopbtn.classList.remove('show'));
Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/
the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
Here is the example figure
html code:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text1"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2">Circle of All Nations</div>
<div id= "bottom2" class = "text2">William Commanda</div>
<div id= "bottom3" class = "text2">William Commanda Legacy - Asinabka</div>
<div id= "bottom4" class = "text2">Romola Vasantha Thumbadoo</div>
<div id= "bottom5" class = "text2">Romola's Nature CAN Photo-Art</div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola#circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
ASINABKA |>
DIGITAL ATLAS |
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
and here is css sheet
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js code(not too important)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Please help, thank you in advance.
Hello There! I think you should try margin: auto property. First of all, remove the position:relative and margin left properties from your container. And then add a width or height to your container(according to your need), and add margin:auto to it. Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it.
And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?
Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/
Does any know how Google plus trigger a button to then open a file input field?
Could they be using an iframe for legacy browsers, or is it a HTML 5 thing???
Any help would be greatly appreciated, as I am needing to make firefox 3.6 trigger an input file via a button. I have read around not possible, but some how google plus can do it.
I can only test with current firefox and chrom version. If it works in IE, you need at least IE 9 (I can't test in IE9).
HTML:
<div class="button_wrapper">
<div class="button_visible" role="button">button description</div>
<div class="button_invisible">
<input type="file" class="button_input" tabindex="-1" multiple="" />
</div>
</div>
CSS:
.button_wrapper {
display: inline-block;
position: relative;
}
.button_visible {
display: inline-block;
position: relative;
padding: 6px 6px;
background-color: #EEE;
border: 1px solid #CCC;
color: #666;
font-size: 12px;
font-weight: bold;
}
.button_invisible {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.button_input {
position: absolute;
top: -10px;
left: -445px;
opacity: 0;
font: 40px arial,sans-serif;
cursor: pointer;
}
Because I didn't want to set the width and height in all css classes, I added this JS:
$('.button_invisible').each(function() {
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
Also see my jsfiddle.