I am using Concreate5 version 8.5.4 and PHP version 7.4 on my VPS.
I want to add a pop-up of notice to my users.
When I am adding this code in Global Region > HTML Block
then my site covered with black color and am not able to do anything.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
A simple pop-up!
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Is there any mistake in this coding, as I am reviewing this code then I am not able to pin point the actual part of code.
Please review this code and help me fix it for fine working.
Thanks
Related
I am making my own custom code editor. I started by modeling it off of this one by TutorialRepulblic:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textarea
I didn't change the JS that takes the text from the text area and inserts it into an Iframe, I just added CSS and it broke. I have removed the CSS and it workes, but when I add it back it breaks. Can anyone help? I will include a code snippet below so you can see:
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
body {
overflow: hidden;
}
.editor {
resize: none;
position: absolute;
top: 50px;
left: 0px;
width: 44%;
border: none;
background-color: #282c34;
height: 100%;
color: #fff;
font-size: 15px;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
}
.run {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 150px;
background-color: #04aa6d;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.run:hover {
background-color: #fff;
color: #616161;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: #616161;
}
.result {
position: absolute;
right: 0px;
top: 0px;
width: 55%;
height: 100%;
border: none;
border-left: 15px solid #282c34;
}
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<iframe class="result" id="myframe"> RESULT HERE </iframe>
<textarea id="textarea" class="editor">
</textarea>
<div class="header">
<button class="run" onclick="updateIframe()">Run ⇛</button>
</div>
</body>
</html>
I am not great with jQuery, but I think I can understand how that code that inserts the text into the Iframe works, but I just don't understand how me adding CSS breaks it. Thanks!
the content is adding to the iframe body but the is hidden beneath header div
update the result css
.result {
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
}
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
I'm currently working on a Wordpress site and I can't get the active checkbox JS code to add a checked class to my parent element.
The snippet works perfectly fine, but why does it not work on my Wordpress site?
$(":checkbox").on('click', function() {
$(this).parent('span').toggleClass("checked");
});
span.cb-style input[type=checkbox] {
cursor: pointer;
background: 0 0;
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
float: left;
border: none;
opacity: 0;
}
span.cb-style {
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
position: relative;
top: 4px;
border: 3px solid #ddd;
background: #fff;
visibility: visible;
margin-right: 10px
}
span.cb-style:hover {
background: #ddd
}
.checked {
background-color: #ff0000!important;
border-color: #ff0000!important;
}
.checked:after {
font-family: "Font Awesome 5 Free";
content: 'x';
color: white;
position: absolute;
font-size: 25pt;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: -75% auto;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tnp-field tnp-field-checkbox tnp-field-privacy">
<span class="cb-style">
<input type="checkbox" name="ny" required="" class="tnp-privacy" id="tnp-privacy">
</span>
<label for="tnp-privacy">
<a target="_blank" href="#">Checkbox Sample Text Bla.</a>
</label>
</div>
My website is working fine, except for my <a href="..."> links.
They work when I don't have a jQuery function in there. When I do have the jQuery function they don't work.
My code:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
text-align: center;
}
.hidden {
display: none;
}
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
background-size: 100%
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 18%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.box {
width: 200px;
-webkit-transition: all .2s;
background: #e3e3e3;
line-height: 50px;
text-align: center;
font-weight: bold;
color: #333;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .3);
cursor: pointer;
}
.box:hover {
background: #333;
color: #e3e3e3
}
nav > ul > li {
display: inline;
text-align: center;
color: white;
margin: 0 auto;
overflow: hidden;
font-size: 20px;
padding: 1em;
}
nav > ul > li.active {
text-decoration: underline;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<br>
<nav>
<ul>
<li class="active">Home</li>
<li><a href="producten.html">Assortiment<a></li>
<li>Contact</li>
</ul>
</nav>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
</div>
<script>
$(document).ready(function() {
$('.hidden').fadeIn('slow').removeclass('.hidden')
});
</script>
<center>
<div class="hidden">
<div class="content">
<h1>OortjesShop.nl</h1>
<p id="test">De webwinkel voor al jouw oortjes en koptelefoons!</p>
<br>
<br>
<div class="box">Bekijk ons assortiment</div>
</div>
</div>
</center>
</body>
</html>
The weird thing is that my <a href="..."> on the box does work, but the one on my menu doesn't.
When I remove the jQuery function it does work.
Your style for h1 is overlapping the navigation,just put it in your css then see the changes.
nav {
float: left;
position: relative;
width: 100%;
z-index: 9999;
}
Thanks
Your .content is positioned absolutely so it's likely covering up your navigation bar which does not allow anything to be clicked (even if it doesn't appear to be covered).
.content {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
z-index: 1000;
}
When jQuery isn't included, that content is hidden which would explain why it works then. Perhaps adjust/remove that style to see if the issue persists.
Your "content" block is z-indexed, but your menu is not. So, when your jQuery fires and reveals the content, it ends up z-indexed over the top of your menu. You have two choices. Either add:
pointer-events: none;
..to your content background so that you can click through the layer (though this may impact click events within that container), or you need to give your menu a position:absolute and a z-index higher than your "content" div.
you got a typo in the second link of your menu:
<a href="producten.html">Assortiment<a>
youre not closing it with </a>
AND
as #Timbal stated
your h1 is overlapping your nav, just put to your nav an higher z-index than z-index of h1:
nav {
position: relative;
z-index: 1001;
}
I am trying to make a slide menu but my Jquery animation is not working. I am trying to move the off the page on click. To make sure Jquery is running i added a couple of divs that work fine when clicked. Here is my code.
$(document).ready(function(){
$(".scroll-menu").click(function(){
$(".scroll-menu").hide();
});
$(".box").click(function(){
$(".box").hide();
});
$(".icon-open").click(function(){
$("nav").animate({left: "-16em"}, 500, swing);
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu{
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color:#ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo{
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app{
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search{
position: relative;
left: 12em;
top: -2em;
width:15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open{
position: absolute;
top: 5em;
cursor:pointer;
left: 19em;
z-index: 2
}
.icon-open i {
cursor:pointer;
z-index: 1
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://use.edgefonts.net/droid-sans:n4,n7:all.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>
<script src="http://use.edgefonts.net/antic:n4:all;droid-sans:n4,n7:all.js"> </script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class= "top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
You need to put quotes around 'swing' in the animation style.
$(".icon-open").click(function(){
$("nav").animate({left: "-16em"}, 500, 'swing');
});
http://codepen.io/anon/pen/BNGWrE
Edit
Added a variable called navhidden so you can toggle the showing and hiding of the nav:
Refresh / open above CodePen link.
$(".icon-open").click(function() {
if (navhidden) {
//Show
$("nav").animate({
left: "0"
}, 500, 'swing');
navhidden = false;
} else {
$("nav").animate({
left: "-16em"
}, 500, 'swing');
navhidden = true;
}
});
In this JSFiddle you can find it works when clicking the image.
$(document).ready(function(){
$(".scroll-menu").click(function(){
$(".scroll-menu").hide();
});
$(".box").click(function(){
$(".box").hide();
});
$(".icon-open").click(function(){
console.log('Image clicked');
$("nav").animate({left: "-16em"}, 500, 'swing');
});
});