So I want one of my images, when clicked on, to have the #app1 animate towards either side then fade out.
I'm aware that my image should have a "on click" attribute, which I have done so. I have a swipe function that will get called. Within my swipe function is where the javascript/jquery is suppose to do the animation.
Yet it is not working, am I doing something wrong? Please help.
THANKS.
<!DOCTYPE html>
<!-- this is comment -->
<html>
<head>
<title>Forget Me Not</title>
<style>
body
{
background-color:#66d9ff;
}
#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}
img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
function Swipe()
{
$(document).ready(function()
{
$(".appIMG1").click(function()
{
$("app1").animate({left:'250px'});
});
});
}
</script>
</head>
<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% onclick="Swipe()">
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>
</body>
</html>
You missed #
$("#app1").animate({left:'250px'});
Demo --> http://jsfiddle.net/AdZ9r/
You don't need on click attribute on your image (as you are already
binding click handler with jQuery)
All you need is (with removed onClick attribute from img)
$(document).ready(function () {
$(".appIMG1").click(function () {
$("#app1").animate({
left: '250px'
});
});
});
since you are using the onclick attribute, you can do either this (without the onclick attribute) in the script tag:
$(document).ready(function()
{
$(".appIMG1").click(function()
{
$("#app1").animate({left:'250px'});
});
});
or this (with onclick attribute)
function Swipe()
{
$("#app1").animate({left:'250px'});
}
and don't forget '#' for the app1 selector.
You're missing the # in your animate.
Also, you shouldnt need the onClick attached to the IMG if you are using the jQuery events. I cleaned up your JS a bit too.
I created a simple example, based on your code, of what you're looking to accomplish here
$(".appIMG1").click(function()
{
$("#app1").animate({left:'250px'});
});
Related
i need to remove/deactivate/change to zero effect following style argument:
#wrapper .fragment-card.aktuelles-card .image-card img:hover{
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
this has to happen with very basic Javascript, so i can not use libarys etc. The JS part will be executed at the end of the page.
Thanks for your help!
You cannot directly deactivate a CSS rule using javascript. So you have two options:
1) The first option uses only javascript for doing it. You can modify the style attribute of the element using the setAttribute() method in order to set transform: none; box-shadow: none;. Like this:
const el = document.querySelector("#myElementId");
el.setAttribute("style", "transform: none; box-shadow: none;");
However, I don't like to use the style attribute while using css rules since I prefer to see all styles in the same css file, and it makes more difficult to mantain code, so I don't recommend to use this solution.
2) The good practice solution involves both CSS and JS. You have to reference make your css rule to a class .my-style. So then you write your css rule like this:
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
So, now you will need to use Javascript to add or remove the .my-style class whenever you need. In the case of img:hover reference you use in your original css, you can make your own js function to add the class when an img is hover, and remove the class when the pointer leaves the img. This event listener will be useful:
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
Try it here
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
img {
width: 200px;
height: auto;
}
<img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg">
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg">
<img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">
You could just create another stylesheet and add that to the end of the head element
if you are sure that the offending styling is set in the head. If not you could put it at the end of the body.
This snippet adds it to the end of the head:
<!doctype html>
<html>
<head>
<style>
#wrapper .fragment-card.aktuelles-card .image-card img:hover {
transform: scale(3);
box-shadow: 0 4px 6px 0 #222;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="fragment-card aktuelles-card">
<div class="image-card">
<img src="https://picsum.photos/id/1015/200/300">
</div>
</div>
</div>
<script>
const style = document.createElement('style');
style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};';
const head = document.querySelector('head');
head.appendChild(style);
</script>
</body>
</html>
I'm currently trying to get bPopup (http://dinbror.dk/blog/bPopup/) to work on my page.
I've found this jsFiddle (http://jsfiddle.net/24A9b/) which shows to get the script to work. Using following code:
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
But i want to get a little more fancy.
On this page (http://dinbror.dk/bpopup/) is several customization elements described. The problem is that i can't write javascripts and jQuery so i have no clue of how to i.e. add a transition to the script.
Hope somebody can guide me.
Marius
Try this
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
box-shadow: 0 0 25px 5px #999;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
background-color: #2b91af;
}
You do not need to write anything.
See the transition effect you want and so change this line:
$('#element_to_pop_up').bPopup();
To (for instance):
$('#element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
You need only to include the two libraries:
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
bpopup: https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js
A simple snippet:
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
});
});
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.bClose{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="bClose">x<a/>
Content of popup
</div>
I have a program which allows the user to select some images and i gave them the pseudo class
.my_image_clas:hover{
border:3px solid blue;
-webkit-box-sizing: border-box; }
to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :
How can i achieve this? (With javascript)
CSS-only "hack"
At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:
img {
margin: 3px;
width: 100px;
}
img:hover, img:target {
border: 3px solid green;
margin: 0;
}
<img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.
Note that this way you can select only one image.
Pure JavaScript
If you want to do it with JavaScript though, you can use below code:
function select(element) {
element.onclick = function() {
element.classList.toggle('selected');
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
img {
margin: 3px;
}
.selected {
border: 3px solid green;
margin: 0;
}
<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.
If you want to limit the user to selecting only one element though, change the above JavaScript to:
function select(element) {
element.onclick = function() {
var selected = document.getElementsByClassName('selected')[0];
if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
if (element !== selected) { element.classList.add('selected'); }
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:
$(document).ready(function() {
$(".my_image_clas").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
.my_image_clas.Hover { border: 3px solid blue; }
#Francesco Monti I've read your comment.
for working with jquery you may add jquery.js under the head tag of your html
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
or adding online would be
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
and you can use $(document).ready(function() under the script tags.
If you want you can separate js & css files and includes those files accordingly.
Your approx CSS:
.item {
box-sizing: border-box;
border: 2px solid transparent;
}
.item.selected,
.item:hover,
.item:focus {
border: 2px solid blue;
}
Some basic jQuery:
$('.item').on('click', function (event) {
event.preventDefault(); // Prevent default behavior if .item is a link or button
$(this).toggleClass('selected');
})
I have to flip an image in my project and im using a function in combination with css to implement it. When it's flipped, it shows another div en when flipped again ofcourse back to the original div. But when I click nothing happens. So something is still wrong, but no idea what.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false);
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
HTML:
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<img src="Images/edan.png" alt="More about Edan" id="test" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
Edan
</div>
<div class="sponsorURL">
<!-- Edan-->
</div>
</div>
</div>
CSS:
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
I have included the jquery plugin:
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
Greets
I guess you have added the Jquery, and you may also add the Jquery UI
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
before
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
http://lab.smashup.it/flip/ On the right side, it mentions that this plugin depends on Jquery and Jquery UI.
Hope it works.
I am making a web app for the user to create a simple orgchart. I don't even have the lines connecting the nodes yet, but I am using text areas. I found a very useful autosize() plugin that is great for adding an extra row when the width is taken up. Is there a way to make it so that if the user only uses one line, the autoresize will shrink the width to wrap around the text?
I was trying to figure out how to do the jsfiddle but I dont know how to add more than one javascript (for the plug-in) so Ill just put my jquery code at the bottom of the plug-in and put the plug-in at in the javascript area in the jsfiddle
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathway Builder 2.0</title>
<link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="PathwayBuilder2.js" type="text/javascript"></script>
<script src="plug-ins/autosize.js" type="text/javascript"></script>
</head>
<body>
<div id="Pathway">
<div class="whole">
<div class="text_display">
<textarea class="text_field_not_selected"></textarea><br />
<input type="button" class="add_child" value="+" />
</div>
</div>
</div>
</body>
</html>
javascript/jquery
$(document).ready(function() {
$('textarea').autosize();
});
$(document).ready(function() {
$('.add_child').live({
click: function() {
var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
$(this).closest('.whole').append(new_child);
$('.text_field_not_selected').autosize();
}
});
});
$('textarea').live('focusin blur', function() {
$(this).toggleClass('text_field_not_selected');
});
css
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#pathway {
display: block;
}
.whole {
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
textarea {
min-width: 2em;
text-align: center;
}
textarea:focus {
resize: none;
}
.text_field_not_selected {
resize: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 3px 5px #444;
-moz-box-shadow: 0px 3px 5px #444;
-webkit-box-shadow: 0px 3px 5px #444;
}
.add_child {
margin-bottom: 25px;
}
here you go working demo : http://jsfiddle.net/YVEhr/30/ (more apt)
or http://jsfiddle.net/YVEhr/1/
Please let me know if thats what you want, I am happy to help out. took me a bit to got it (i.e. resizing idea) :)
Edit Okies I got it now (Phew) Please feel free to play around with the css or you can have 'row=something` to start with, I have shared some links for further help. :)
Demo http://jsfiddle.net/YVEhr/30/
Resizing the textarea to fit the screen: good link: or you can also look into this man: http://archive.plugins.jquery.com/project/TextFill
Jquery Code
//inital resize
resizeTextArea($('textarea'));
//resize text area
function resizeTextArea(elem){
// alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight);
elem.height(1);
elem.scrollTop(0);
elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}
//'live' event
$('textarea').live('keyup', function() {
var elem = $(this);
// alert('foo');
//bind scroll
if(!elem.data('has-scroll'))
{
elem.data('has-scroll', true);
elem.bind('scroll keyup', function(){
resizeTextArea($(this));
});
}
resizeTextArea($(this));
});
Please let me know if thats what you want.
Explanation
Just need to bind new etxtareaclass to .autosize() function and rest you can see it in jsfiddle.
Dont forget to accept the answer & if you like you can use this solution without using any plugin: jQuery - Building an AutoResizing TextArea that Doesn't Flash on Resize
Anywho this will work, hope this helps and have a nice one, cheers!
JQuery Code
$(document).ready(function() {
$('.add_child').live({
click: function() {
var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
$(this).closest('.whole').append(new_child);
$('.text_field_not_selected').autosize();
}
});
});