I am using jquery.simplemodal 1.3.5 (i tried older versions)
the close button doesnt close the modal in firefox (i tried IE and it work fine)
this is the test page i am using:
<html>
<head>
<title>Untitled Page</title>
<style>
#simplemodal-overlay {
background-color:#000;
cursor:wait;
}
#simplemodal-container a.modalCloseImg {
background: url(../images/modal_close.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:15px;
right:18px;
cursor:pointer;
}
.modala
{
width: 372px;
height: 206px;
background: url(../images/modal.png) no-repeat;
}
</style>
</head>
<body>
test page
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/include/jquery.simplemodal-1.3.5.js" type="text/javascript"></script>
<script type="text/javascript">
$("body").click(function() { $.modal("<div class=\"modala\"><h1>SimpleModal</h1></div>", {overlayClose: true} ); });
</script>
</body>
</html>
what can be the problem? is it a known problem with simplemodal and FF?
simplemodal is a deprecated library. You better use something like http://docs.jquery.com/UI/Dialog
Related
I created a processing JS code in an external IDE from my HTML and I want to put it on my HTML page. I went through many tutorials but I could not figure out why I have the following problem.
My 600x600 project should look like this:
Working
When I embed it on my website it looks like this:
Not Working
This is my HTML:
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="https://mhs-robotics.com/style/point-counter.css">
<script type="text/javascript" src="https://mhs-robotics.com/java/processing.js"></script>
</head>
<body>
<center>
<canvas id="can" width="10px" height="10px" data-processing-sources="https://mhs-robotics.com/java/counter.pde"></canvas>
</center>
</body>
This is my CSS:
#can {
width: 600px;
hight: 600px;
margin: auto;
border: 5px solid black;
}
I fixed it
I added:
void setup() {
size(600, 600);
}
I am trying to make buttons and the "dot-menu" in slick slider visible.
My example in jsfiddle looks OK, though the "dot-menu" underneath the items is missing: my slick example
In "real live" my implementation looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<style >
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
</body>
</html>
There are buttons on top of the item set instead of a nice round buttons valigned and on top of the left item.
Desired implementation:
How can I acchive the desired state of the buttons and also show dot indicators on the bottom of each set?
The below code works as your expecting, the problem was you're including the jquery files twice, once in the head and once at the end of the body. Also you forgot to include the "slick-theme.css" after "slick.css"
To get the dots at the bottom of the carousel, according to the docs, simply add dots: true in settings
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<style>
html,
body {
padding: 20px;
background-color: #CCC;
}
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
});
});
</script>
</body>
</html>
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
I am using JS plumb 1.5.5, the basic case is working fine on chrome, IE 10 and mozilla. But i am getting the ERROR : 'jsPlumb.Endpoints[...]' is null or not an object , when running the same on IE version 8.0.7600.16385. I tried debugging the javascript and found that the error is happening because _jsPlumb.getRenderMode() is undefined. I tried setting the renderMode to VML and SVG but still i get the same error. I have to support this on IE8 as well. The sample code thats throwing the error is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta http-equiv="Cache-Control" Content="no-cache">
<!-- library scripts -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.5.5.js"></script>
<script type="text/javascript" src="js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="js/wfeditor.js"></script>
<style>
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 100px;
}
#state3 {
left: 100px;
top: 250px;
}
</style>
</head>
<body>
<div id="state1" class="item"></div>
<div id="state2" class="item"></div>
<div id="state3" class="item"></div>
</body>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.makeSource($('.item'), {
connector: 'StateMachine'
});
jsPlumb.makeTarget($('.item'), {
anchor: 'Continuous'
});
});
</script>
</html>
Hi I am using Dreamweaver and trying to get an image or button to change after it is clicked on. Essentially, I want an image to say follow before it is clicked on and say unfollow after it is clicked on like happens on Twitter, Quora etc.
Thanks in advance!
#Spencer: Are you using a JavaScript framework (e.g. jQuery or mootools)? You could add or replace a class for the button when it is clicked so that it'll have a different style to the button in its default state.
Update: Here's some sample code to get you started (see it in action here: http://jsfiddle.net/5HqFw/) --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4527859</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
<style type="text/css">
#button {
border: 1px solid green;
display: block;
padding: 5px;
text-align: center;
width: 100px;
}
.default {
background-color: white;
color: green;
}
.clicked {
background-color: green;
color: white;
}
</style>
</head>
<body>
<p>Button!</p>
</body>
</html>