I have little problem with FullCalendar dayClick. Is this possible to show my window (div with my css style) to add new event in calendar?
HTML
<div class="Calendar">
</div>
<div class="dayClickWindow">
</div>`
CSS
.dayClickWindow
{
width:500px;
height:500px;
border-radius:15px;
background-color:#000;
position:absolute;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
display:none;
z-index:1;
}
JQ
$(document).ready(function() {
$('.Calendar').fullCalendar({
dayClick: function (data, event, view) {
$(this).show('.dayClickWindow');
}
});
});
You're supposed to call show on the element you want to show. Change $(this).show('.dayClickWindow'); to $('.dayClickWindow').show();
Demo below:
$(document).ready(function() {
$('.Calendar').fullCalendar({
dayClick: function(data, event, view) {
$('.dayClickWindow').show();
}
});
});
.dayClickWindow {
width: 500px;
height: 500px;
border-radius: 15px;
background-color: #000;
position: absolute;
left: 50%;
top: 50%;
margin-top: -250px;
margin-left: -250px;
display: none;
z-index: 1;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css">
<div class="Calendar"></div>
<div class="dayClickWindow"></div>
Related
I have a question about JavaScript: when the user clicks the jump-down button, the text box opens and the direction of button changes and rotates.
I think I should use two photo. when I click the jump-down button, the first photo hides and the other photo replaces, but I don't know how can I do this in JavaScript (the CSS code for imageButton2 doesn't work). Here is my code:
$(function () {
$("#jump_down").click(function () {
$("#wrapper").slideToggle("slow");
})
})
var show1=true;
$('#jump_down').click(function(event) {
document.getElementById('jump_down').style.visibility = show1 ? 'visible' : 'hidden';
document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
show1 = !show1;
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
#ImageButton2 img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" onClick="swapButtons(false)" style="visibility: visible; "></a>
<img src="http://dl.20script.ir/tools/back-up/UpBtn_20Script_2.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
You can have a pure CSS solution for the image rotation.
Rotate the image once your #jump_down div has the class .open
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
To toggle the .open class, apply jQuery toggleClass('open') when #jump_down is clicked.
$(function () {
$("#jump_down").click(function () {
$( this ).toggleClass("open");
$("#wrapper").slideToggle("slow");
})
})
#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#jump_down.open img{
transform: translate(-50%,-50%) rotate(180deg);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" style="visibility: visible; "></a>
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
This question already has answers here:
Jquery not loading in head but loading on bottom of body tag
(5 answers)
Closed 7 years ago.
hello my javascript code is not working i included the css and the script in the code i don't have good experience in javascript maybe there is something missing i need some help here thanks in advance
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
</html>
its working already.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
</html>
The order of your HTML is totally incorrect, you have the <head></head> tag below the <body></body>.
Place the head tag above the body, just after the opening html tag then move your css and the link to jQuery in this section.
Finally it's better to add your JS at the very bottom of the page as the browser reads the dom from top to bottom, thus will increase the speed of the page load.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
<script type='text/javascript'>
$(function() {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
</body>
You have multiple errors.
First the css in <style></style> tag must be in your <head></head> of your page.
Best solution is using external css file and add him with a <link> in your <head>.
After that the <script> section is highly better on the bottom of your page because the browser compile in order of your code.
If you want add <script> before html add your script in this function :
$(document).ready(function(){
// Here
});
write the jS code in a .js file and use
<script src="foo/bar/yourScript.js"></script>
the style sheet in an .css and use a
<link rel="stylesheet" href="css/bar/yourStyle.css">
so the Script-tag is always at the Bottom of the body-element
the head is above the body and the link-tag inside the head
Here is suggestion that please maintain the flow of code.
write the css Style in head tag and jquery or JavaScript after body tag completed.
Here is jsfiddle link
https://jsfiddle.net/nbcakhzz/2/
Hope it will help you.
I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS