I want to add a button for each image and the images will add border when button is clicked.
<img src="icon.png" id="vermillion" class="pic"/>
<div class="btn"id="vermillion">select</div>
I'm not good in Javascript.
I made change on
$('#image_container.btn').click(function(){
I'm not sure is it correct or not..
Original HTML code:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#image_container img').click(function(){
//remove border on any images that might be selected
$('#image_container img').removeClass("img_border")
// set the img-source as value of image_from_list
$('#image_from_list').val( $(this).attr("src") );
$('#data_value').val( $(this).attr("id") );
// $('#data_value').val( $(this).data("options").color );
//add border to a clicked image
$(this).addClass("img_border")
});
})
</script>
<style>
.img_border {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="image_container">
<img src="icon.png" id="vermillion" />
<img src="icon.png" id="riverway"/>
<img src="icon.png" id="solaria"/>
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
<input id="data_value" type="text" value="" />
</form>
Use CSS pseudo classes.
http://www.w3schools.com/css/css_pseudo_classes.asp
especially :active pseudo class.
Related
I am converting div element to image or screenshot. I've search throughout the internet and found out about html2canvas. I tried using it but no luck. Is there anyone who knows how to make it work? Here is my source code.
<html>
<head>
<title> Screenshot </title>
</head>
<body>
<div id="container">
<h1> Screen shot me </h1>
</div>
<button onclick = "screenshot()"> Capture </button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas){
document.body.appendChild(canvas);
})
}
</script>
</html>
My error keeps saying
Uncaught TypeError: html2canvas(...).then is not a function
at screenshot
at HTMLButtonElement.onclick. Did I miss something?
Im using Laravel 5.6 with NPM. Thankyou in advance!
Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.
function takeSnapShot() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.querySelector("#newCanvas").appendChild(canvas);
});
}
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>
I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.
When I do with the following approach it is displaying math formula as text(not formatting as formula).
<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
function onSubmit(){
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML=data
}
</script>
</head>
<body>
<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()" >
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
}
</script>
</body>
</html>
It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html.
For reference(Comparison between katex and latex ) :
https://www.intmath.com/cg5/katex-mathjax-comparison.php
So the solution by using katex will be :
<!DOCTYPE html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
crossorigin="anonymous"></script>
<script>
function onSubmit() {
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML = data
domChanged();
}
</script>
</head>
<body>
<form action="#">
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()">
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
});
if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
document.getElementById('ie8-warning').className = 'tip alert';
}
function domChanged() {
renderMathInElement(document.body);
}
</script>
</body>
</html>
Good luck !!!
I am using ajax to auto refresh a div tag using this code in my index.php file:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#messanges').load('messanges.php');
}, 1000);
});
</script>
<div id="messanges"></div>
<textarea name="chat_input" id="chat_input"></textarea>
In messanges.php I have a auto scroll down code.
Cause I want it to start at the bottom when entering the chat.
<head>
<script>
var chat_height = $('#chat').outerHeight();
$('#chat_box').scrollTop(chat_height);
</script>
</head>
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">
"Test" </p>
</div>
The code is now forcing the scroll to stay at the bottom because of the ajax auto refresh.
How can I make it auto refresh, but if I want to scroll up it will not force me down when it refresh?
try some like this
<head>
<script>
var chat_height = $('#chat').outerHeight();
if($('.doScroll').is(':checked'))
{
$('#chat_box').scrollTop(chat_height);
}
</script>
</head>
<input type="checkbox" class="doScroll" checked />
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">"Test" </p>
</div>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here