I know that the Wix doesn't support Jquery yet so the only option I have is to run it in their HTML editor. So I got the HTML, Jquery and CSS code running perfectly here on jsfiddle.
But when I try to run all these codes in their Edit code window, Jquery doesn't work and play/pause audio players loses its transition.
Here's what I tried to do:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
</script>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
<span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
<span class="right"></span>
</div>
<style type="text/css">
.control {
border: 2.0px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
content: "";
height: 112px;
}
.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}
.control.pause .left {
border-right: 22.4px solid transparent;
}
.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}
.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}
.control:hover {
border-color: #000;
}
.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
</head>
</html>
What am I doing wrong?
I'm a beginner so any help would be appreciated. Thanks in advance :)
Actually I think what you need to understand is that Wix Code is essentially its own jQuery. Wix Code is a javascript API into Wix's own DOM extrapolation framework and does similar things to jQuery.
Elements are created in the Wix Editor and then you interact with them using the Wix DOM using the $w() scope selector and element IDs.
To use raw HTML like this you would need to add an iframe to your Wix Page and then run your code, sandboxed, in the iframe. Check out this article for more information:
https://support.wix.com/en/article/guidelines-and-limitations-of-the-html-code-and-embed-a-site-elements
Cheers
I know this is an old question but i just saw it :)
The format of your code is wrong. You have your html layout in the head section instead of the body. Another issue is that you have your functional script before the html layout is rendered so it probably wont' work. (jsfiddle adds the javascript section on the bottom of the body by default)
Check out this approach:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.control {
border: 2.0px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
content: "";
height: 112px;
}
.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}
.control.pause .left {
border-right: 22.4px solid transparent;
}
.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}
.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}
.control:hover {
border-color: #000;
}
.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
</head>
<body>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
<span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
<span class="right"></span>
</div>
<script>
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
</script>
</body>
</html>
Related
I can change other elements on the page using Jquery, but i can't seem to be able to toggle back to the default css class when it is using ::before..
Default Checkbox css in action
Checkbox Checked css in action
Now i have a button, that when its clicked, should reset my css to the default Checkbox - but it doesnt seem to work for me... The button stays green and it doesn't move to the left..
**
After button clicked example
**
CSS -
<style>
.checkbox {
appearance: none;
border: 2px solid #ccc;
border-color: red;
border-radius: 20px;
cursor: pointer;
height: 24px;
outline: none;
position: relative;
transition: 0.3s;
width: 37px;
}
.checkbox::before {
background: red;
border-radius: 50%;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 2px;
transition: 0.3s ease-in-out;
width: 15px;
}
.checkbox:checked::before {
background: green;
transform: translateX(18px);
}
.checkbox:checked {
border-color: green;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.float-child-unknown {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
</style>
JS -
function outsideModalClick() {
$(document).ready(function() {
document.getElementById('button').onclick = function() {
$('.float-child').css('border', '2px solid red');
$('.iconShow').toggleClass('iconhide');
$('.checkbox:checked::before').toggleClass('.checkbox::before');
$('.checkbox:checked').toggleClass('.checkbox');
}
})
}
Edit - Still not working - css is not being applied
I was creating a replica of google webpage. I have everything finished but my dropdown menu for the apps icon only shows up halfway. I've already tried increasing the height etc. I think its not showing after the header portion. Please suggest any possible blunders I may have committed.
CSS
<style>
.menu-btn
{background-color:#f5f5f5 ;
color: black;
font-family: sans-serif;
border: none;}
.dropdown-menu {
position: relative;
display: inline-block;
position: relative;
display: inline-block;
border:1% solid #3c4043;}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
right: 0;
align-items:center;
border-radius: 3%;
border:1% solid #black;
width:300px;
height: 500px;
cursor: pointer;}
</style>
**<javascript>**
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
if(menuContent.style.display===""){
menuContent.style.display="block";}
else {
menuContent.style.display="";}
})
</script>
You have an extra : in the height for your menu-content class.
There are also a few other bugs in the CSS. I created a jsfiddle that might help you figure out what's wrong with your own code.
https://jsfiddle.net/6ck7rq53/6/
I created a simple HTML dropdown using your own classes:
<html>
<body>
<div class="dropdown-menu">
<button class="menu-btn">Dropdown
<div class="menu-content">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</button>
</div>
</body>
</html>
and I fixed your CSS bugs:
.menu-btn {
background-color: #f5f5f5;
color: black;
font-family: sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
border: 1px solid #3c4043;
height: auto;
}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
right: 0;
align-items: center;
border-radius: 3%;
border: 1px solid black;
width: 300px;
height: 500px;
cursor: pointer;
left: 0;
}
Fixing some existing code, the two divs align ok on Firefix/IE but NOT on Chrome.
Have tried playing with padding, though fixing it on Chrome then it breaks elsewhere.
Might me a simple overlooked settings that I can't seem to fix for days now.
Code: (works fine, on firefox and not so well on chrome)
Any tips of fixing this?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
#media (max-width: 680px) {
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
width: 70% !important;
}
}
input {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
font-size: 24px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
#media (max-width: 680px) {
input[type=text] {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
margin-left: 0px;
font-size: 14px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
input[type=submit] {}
}
input[type=text] {
background-color: #F4F7FA;
width: 100%;
border: 21px solid transparent;
border-right: 0px solid transparent;
}
input[type=submit] {
background-color: #ef7023;
color: #fff;
cursor: pointer;
border-radius: 1px 25px 25px 1px;
width: 30%;
height: 100% !important;
}
</style>
<div style="padding-top:60px;background-color:grey;">
<form style="padding-left:33%;padding-right:30%;">
<div class="autocomplete" style=" max-width:67%;width:100%;">
<input class="search" type="text">
</div>
<div style="display:inline-block;">
<input value="" style="width:100px; max-width:100%;" type="submit"></div>
</form>
</div>
For inline-block elements you should add padding-top and padding-bottom to your element for vertical alignment.
add this to your css :
form {
padding-top: 50px;
padding-bottom: 50px;
}
I set value 50px but you can set appropriate value by yourself.
Also remove padding-top: 60px from your main div.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
#media (max-width: 680px) {
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
width: 70% !important;
}
}
input {
border: 21px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
font-size: 17px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
#media (max-width: 680px) {
input[type=text] {
border: 20px solid transparent;
border-left: 0px solid transparent;
background-color: #f1f1f1;
margin-left: 0px;
font-size: 14px;
border-radius: 25px 1px 1px 25px;
display: inline-block;
}
input[type=submit] {}
}
input[type=text] {
background-color: #F4F7FA;
width: 100%;
border: 21px solid transparent;
border-right: 0px solid transparent;
}
input[type=submit] {
background-color: #ef7023;
color: #fff;
cursor: pointer;
border-radius: 1px 25px 25px 1px;
width: 30%;
height: 100% !important;
}
form {
padding-top:50px;
padding-bottom: 50px;
padding-right: 15%;
padding-left: 15%;
}
</style>
<div style="background-color:grey;">
<form>
<div class="autocomplete" style=" max-width:67%;width:100%;">
<input class="search" type="text">
</div>
<div style="display:inline-block;">
<input value="" style="width:100px; max-width:100%;" type="submit"></div>
</form>
</div>
Here is a complete guide to center elements vertically and horizontally : centering elements complete guide
I need a function to change the appearance of some elements in my HTML page but I am not able to do it.
The problem is that I cannot use a command like
document.getElementById('')
because I need to make the changes effective when the page is already loaded and I use Django and python. My html page looks like this.
<html>
<style type="text/css">
.bs-sidebar.affix {
position: static;
}
.sideheading{
background-color: #e0e0e0;
background-image: -moz-linear-gradient(#fafafa, #e0e0e0);
background-image: -webkit-linear-gradient(#fafafa, #e0e0e0);
background-image: linear-gradient(#fafafa, #e0e0e0);
background-repeat: repeat-x;
display: block;
padding: 10px 10px;
border-bottom: 1px solid #ccc;
color: #222;
font-weight: bold;
font-size: 20px;
line-height: 20px;
border-left: 0 none;
}
/* First level of nav */
.bs-sidenav {
/*margin-bottom: 30px;*/
padding-top: 10px;
padding-bottom: 10px;
background-color: #fafafa;
border-radius: 5px;
border:1px solid #CCC;
}
.bs-sidebar .nav > li > a {
font-size: 1.2em;
display: block;
color: #716b7a;
padding: 10px 20px;
border-right: 4px solid transparent;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
background-color: #fff;
border-right: 4px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
color: #418cd1;
background-color: #fff;
border-right: 4px solid #418cd1;
}
.xgap{
margin-top:60px;
}
.wrap {
margin: 0 auto;
}
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #2f3439;
.progress-radial .overlay {
position: absolute;
width: 60px;
height: 60px;
background-color: #fffde8;
border-radius: 50%;
margin-left: 20px;
margin-top: 20px;
text-align: center;
line-height: 60px;
font-size: 16px;
}
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent),
linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-5 {background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%,
transparent), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
</style>
<div class="span6">
<table class="table table-borderless" style="border:1px solid #C0C0C0;background-
color:#FBFBFB;">
<tr><th>First name </th><td>: {{user.first_name}}</td></tr> --> I use
// Django framework user.first_name is from source file
// When the html page is loaded I want to check the td.If td
// has value the profile meter should change from 0% to 10%.
<tr><th>Last Name </th><td>: {{user.last_name}}</td></tr>
<tr><th>Primary mail </th><td>: {{ user.email }}</td></tr>
</table>
</div>
<div class="wrap row">
<div class="progress-radial progress-{{progress}}" style="margin:10px 0px 20px
70px;">-->// here {{progress}}should change according to the td's (i.e)
//initially it is 0% I need a javascript to draw the profile meter.
<div class="overlay">{{progress}}%</div>--> here {{progress}} should change
// according to the td's (i.e) initially it is 0% and it
// should change 10%, 20% and so on according to the td's field.
</div>
</div>
</html>
I need a javascript function for changing the profile meter.
If you want to wait for the page to be done loading just use window.onload, then you can call document.getElementById() inside, which will run when the page is done loading:
window.onload = function() {
// This is only ran after the window is loaded
document.getElementById('myElementsId').style.[css-property] = [change];
}
For example if I wanted to change a color:
window.onload = function() {
document.getElementById("myElementsId").style.color = "blue";
}
If you want a progressbar to fill up to a certain value, try the following:
HTML:
<div class="progressbar"><div class="progress"></div></div>
CSS:
.progressbar {
height: 30px;
position: relative;
border: 1px solid #ccc;
}
.progressbar .progress {
position: absolute;
height: 30px;
left: 0;
top: 0;
width: 0%;
transition: width 0.3s ease-out;
background: #f00;
}
JS:
document.getElementsByClassName('progress')[0].style.width = '10%';
If you call the above JS line at the bottom of the page (right before </body>) it should work like a charm :)
hi i wanted to make a similar dropdown div just like on facebook
here
the problem is the div doesnt stay when you hover out.how can i toggle it. like it will only disappear when you click outside the div? like facebook navigation bar?
CSS
.divs {
display: none;
}
a:hover + .divs {
display: block;
background-color:white;
}
HTML
<a><img src="someIconsButtons.png"></a>
<div class="divs">
Stuff here...
</div>
how can i attain that? thanks please be gentle guys im kinda newbie :))
Using CSS
.divs
{
display: none;
}
a:hover + .divs
{
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
LIVE DEMO
.divs {
display: none;
}
a:hover+.divs {
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<a><img src="http://i.stack.imgur.com/s7eOO.jpg?s=32&g=1" /></a>
<div class="divs">
Stuff here...
</div>
You can achieve this by using jQuery.
Try this:
HTML:
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
CSS
#divblock
{
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
and here is a key what you want,
jQuery:
$('#divblock').hide();
$('#showdivblock').click(function(e){
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('#divblock').slideUp();
});
LIVE DEMO
$('#divblock').hide();
$('#showdivblock').click(function(e) {
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#divblock').slideUp();
});
#divblock {
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
Hope it helps you!
Here is my jQuery solution,
I made your box of stuff display on hover and then if the body is clicked it is hidden.
$('img').hover(function(){
$('div#box').show();
});
$('body').click(function(){
$('div#box').hide();
});
Here is a fiddle to demonstrate. http://jsfiddle.net/joey6978/zLXK8/