is it possible to rotate an image by mouse-click? So I´m having an image on an empty html-page and want to click and drag the image, so that it rotates around it´s center.
Do you have a code or working example?
Best regards,
Marc
Can be done using java script.Following is just a sample code.
<style type="text/css">
img.primary { display: inline; }
img.secondary { display: none; }
div.foo:hover img.secondary { display: inline; }
div.foo:hover img.primary { display: none; }
</style>
<script type="text/javascript">
function swapImages(container)
{
for(var child in container.childNodes)
{
child = container.childNodes[child];
if(child.nodeName == "IMG")
child.className = child.className == "primary" ?
"secondary" : "primary";
}
}
window.onload = function() {
// Remove the foo class when the page loads, to disable hover
var chartArea = document.getElementById("chartArea");
for(var child in chartArea.childNodes)
{
child = chartArea.childNodes[child];
if(child.nodeName == "DIV" && child.className == "foo")
child.className = "";
}
}
</script>
<div id="chartArea">
<div class="foo" onclick="swapImages(this);">
<img class="primary" src="http://somewhere/piechart1.png" />
<img class="secondary" src="http://somewhere/barchart1.png" />
</div>
<div class="foo" onclick="swapImages(this);">
<img class="primary" ... />
<img class="secondary" ... />
</div>
<div class="foo" ....>
</div>
Related
I have created a step form with HTML & jquery which has next and previous buttons for navigating to different steps. I have written jquery function for next buttons, but could'nt do one for previous buttons. Please help me with code.
code to trigger next button
var allNextBtn = $('.nextBtn');
allNextBtn.click(function () {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
I would suggest another approach to your problem:
You want to create a stepper
In the stepper, you would like to show pages of a form
The stepper needs to have controls: prev, next (, first, last?)
The controls should take form validation into account (on the current page)
You want to do DOM manipulation with jQuery
Consider the following snippet:
var currentPage = 1
jQuery(document).ready(function($) {
// init first page
updatePage(0)
jQuery(".btn.next").on('click', function(e) {
e.preventDefault()
// checking for last item & if page input fields are valid
const direction = ($('.page').length > currentPage && validatePage()) ? 1 : 0
updatePage(direction)
})
jQuery(".btn.prev").on('click', function(e) {
e.preventDefault()
// checking for fist item
const direction = 1 < currentPage ? -1 : 0
updatePage(direction)
})
})
// simple validation function
function validatePage() {
const inputValue = jQuery(`[data-page-order="${ currentPage }"]`).find('input').val()
return inputValue !== ''
}
// simple page visibility update function
function updatePage(direction) {
if (direction === 1 || direction === -1) {
currentPage += direction
$(".page.visible").fadeOut().removeClass('visible')
$(`[data-page-order="${ currentPage }"]`).fadeIn().addClass('visible')
} else {
$(".page.visible").removeClass('visible')
$(`[data-page-order="${ currentPage }"]`).addClass('visible')
}
}
form {
width: 50%;
}
.pages {
position: relative;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
.pages>.page {
display: block;
position: absolute;
display: none;
}
.pages>.page.visible {
display: block;
}
.controls {
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<form>
<div class="pages">
<div class="page" data-page-order="1">
<label for="input1">Input 1:
<input id="input1" type="text" />
</label>
</div>
<div class="page" data-page-order="2">
<label for="input2">Input 2:
<input id="input2" type="text" />
</label>
</div>
<div class="page" data-page-order="3">
<label for="input3">Input 3:
<input id="input3" type="text" />
</label>
</div>
</div>
<div class="controls">
<button class="btn prev">PREV</button>
<button class="btn next">NEXT</button>
</div>
</form>
</div>
You can see that with the manipulation of a single variable (currentPage) prev & next steps can be done - with validation rules, form pages appear/disappear with a fadeIn/fadeOutand all.
I do hope that this snippet gives you the idea about how to solve a problem like this - break it down to requirements that are simple and then don't overcomplicate :) Just add one feature at a time (like prev/next, validation, etc.).
I have some code that looks like this
<div class="topnav">
<div>{{getGameView.Game.gameplayers[0].player.username}}</div>
<p>VS</p>
<div v-if="getGameView.Game.gameplayers.length > 1">
{{getGameView.Game.gameplayers[1].player.username}}
</div>
<div v-else>Waiting for opponent...</div>
</div>
Which prints this: NameVSName
I am trying to make it so that between Name and VS there is some space but cannot figure out how to do it.
A solution is to give to the VS element a class like .vs and add some padding to it:
p {
margin: 0;
}
.topnav {
display: flex;
}
.topnav .vs {
padding-right: 10px;
padding-left: 10px;
}
<div class="topnav">
<div>Name</div>
<p class="vs">VS</p>
<div>Name</div>
</div>
You can insert a space in html with .
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
nameA: "Job",
nameB: "Bob"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ nameA }} Vs {{ nameB }}
</div>
How to insert spaces/tabs in text using HTML/CSS
I have a simple webpage with "site map" on bottom that won't be implemented for weeks or months and am developing the rest as I go.
So, "Site Map" needs to be a link (I presume) with "href=" (?) where I can add a link later? Upon hover, I need text saying "coming soon" to show up, along with an image on both sides, i.e.
(before hover)
Site Map
(after hover)
Site Map Coming Soon
There should be a little space between the pic and text that pops up.
#my_map:hover:after {
margin-left: 20px;
color: green;
content: "(Coming Soon)";
}
<h1>Before and After Tag Example</h1>
<p id="my_map">Site Map</p>
<p>Go back to Main Menu</p>
<span> <img src="lightening_bolt" alt="bolt" height="20" width="20";> coming soon <img src="lightening_bolt" alt="bolt" height="20" width="20";> </span>
<p style "margin-top: 50px;">Hover over Site Map... </p>
Above isn't allowing for an image, just content= some text, and all the searching I've done to find some code ideas seem to be with other objectives...
You can add an image to the content of an :after pseudo element by using the url() attribute. If you want text as well as an image, you need to string these together without a space. If you want space between the image and the text, just be sure to include the spaces withing your text string. The snippet below shows an image placed before and after the string.
Note: the images take a second or two to load.
var myMap = document.getElementById("my_map2");
var comingSooon = document.getElementById("my_map2");
//
myMap.addEventListener("mouseover", function() {
cs.innerHTML = "<img src='https://picsum.photos/200' height='15' width='40' /> (Coming Soon) <img src='https://picsum.photos/200' height='15' width='40' />";
}, false);
//
myMap.addEventListener("mouseout", function() {
cs.innerHTML = "";
}, false);
#my_map:hover:after {
margin-left: 20px;
font-size: 20px;
color: green;
content: url("https://picsum.photos/20")" (Coming Soon) "url("https://picsum.photos/20");
}
<p id="my_map">Site Map</p>
<p>Site Map 2 <span id="cs"></span></p>
You could also just have the image already there and hide it until the anchor is hovered over:
#map-link {
display: inline-block;
}
#hidden-message {
display: none;
transition: display 1s linear;
}
#map-link:hover+#hidden-message {
display: block;
}
#cmg-soon-img {
margin: 0;
padding: 0;
height: 100px;
width: 100px;
}
<div id="my_map">
<p id="map-link">Site Map</p>
<div id="hidden-message">
<img id="cmg-soon-img" src="https://picsum.photos/20">
<p>
"Coming soon..."
</p>
</div>
</div>
Which would allow you to control the width and height of the image shown.
<!-- Here's what I got (hope answer my own question doesn't close thread...-->
<!DOCTYPE html>
<html>
<head>
<style>
#my_map {
margin-right: 30px;
font-size: 35px;
text-decoration: none;
}
</style>
</head>
<body>
<p>Site Map <span id="cs"></span></p>
<script>
var myMap = document.getElementById("my_map");
var comingSooon = document.getElementById("my_map");
myMap.addEventListener("mouseover", function() {cs.innerHTML = "<img src='https://picsum.photos/20' height='35' width='35' /> (Coming Soon) <img src='https://picsum.photos/20' height='35' width='35' />";}, false);
myMap.addEventListener("mouseout", function() {cs.innerHTML = "";}, false);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
#soon:hover:after {
margin-left: 20px;
color: green;
content: "Soon";
}
</style>
</head>
<body>
<p id="soon" style="font-size: 25px; margin-left:5%;"> Site Map </p>
<p style="margin-bottom: 150px;"></p>
<!-- take out the image and it's broken... it shows what I'm trying to do... -->
<img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42">
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "inline") {
x.style.display = "none";
} else {
x.style.display = "inline";
}
}
</script>
<p style="display: inline" onmouseover="myFunction()"
onmouseleave="myFunction()">Click Me
</p>
<div id="myDIV">
<span><img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42"> Text <img src="399-3991460_face-with-stuck-out-tongue-
eye.jpg" alt="Lightening bolt"
height="42" width="42"> </span>
</div>
</body>
</html>
var Home = React.createClass({
render: function() {
return (
<div>
<img src="images/12.jpg" />
<img src="images/11.jpg" />
<img src="images/13.jpg" />
<img src="images/14.jpg" />
</div>
)
}
})
I need these 4 images as a slider can anyone give me the code using react or html with CSS
Use ready-made library, here example
https://github.com/jossmac/react-images
https://github.com/xiaolin/react-image-gallery
http://kenwheeler.github.io/slick/
First that is not the way to ask a question. Check here how to ask good question.
You can use some of all made React Slider Components, but if you want to do it on your own you can do something like this :
This is only to get the idea :
class Test extends React.Component {
constructor(){
super();
this.state = {
marginLeft: 0
}
}
componentDidMount(){
this.interval = setInterval(this.changeSlide.bind(this), 2000);
}
changeSlide(){
let totalSlides = document.getElementById("inner").children.length - 1;
let getWidth = document.getElementById("slide1").offsetWidth;
let marginLeft = this.state.marginLeft;
if((totalSlides * -getWidth) >= this.state.marginLeft){
marginLeft = 0
}else{
marginLeft = this.state.marginLeft - getWidth
}
this.setState({marginLeft})
}
render(){
return (
<div className="outter">
<div id="inner" className="inner" style={{marginLeft: this.state.marginLeft}}>
<img src="https://cdn.pixabay.com/photo/2016/12/29/16/12/eiskristalle-1938842_960_720.jpg" style={{maxWidth: "100%"}} id="slide1"/>
<img src="https://cdn.pixabay.com/photo/2014/10/16/09/15/frost-490807_960_720.jpg" style={{maxWidth: "100%"}} id="slide2"/>
<img src="https://cdn.pixabay.com/photo/2015/03/01/07/24/winter-654442_960_720.jpg" id="slide3"/>
</div>
</div>
)
}
}
ReactDOM.render(<Test />, document.getElementById('container'));
.outter{
width: 500px;
overflow: hidden;
}
.inner{
width: 1000%;
float:left;
margin-left: 0;
transition: all 1s ease;
}
.inner img{
max-width: 500px;
width: 500px;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
In componentDidMount set interval to call the function to change the slide every 2 seconds (in this case).
In function changeSlide first you need to get total slides and the width of the first one (because all have the same width).
Then if it's the last slide set margin-left to 0 and if it's not then subtract the photo width of the current margin-left in the state. At the end update the state.
Hope that this will give you the idea how you can do it.
Here is the fiddle.
I'm trying to make a small web-app using Polymer, based on the Nav + List + Detail-layout example they have provided. For part of my web-app I want to make a photo gallery. Luckily, there's an element for that. Unfortunately, there's no element for that. So I set myself upon the task of making my own custom-element that provides this functionality, based on PhotoSwipe.
So I decided to start simple by just implementing the code they provided as an example (see this CodePen). I simply copied this code into a custom element to see how it works, but unfortunately it doesn't work 100%. Here is the CodePen of the custom element.
For small displays the photo's display correctly, but when the screen is tall the 3rd and 4th photo don't align to the center anymore, but slide to the bottom right corner. The easiest way to see this is by pressing the full screen button when viewing an image. Below is an image where you can clearly see the offset to the bottom-right.
I rechecked and this isn't an issue in their own CodePen, but I can't seem to find if there are overlapping styles or something else is breaking it up. Any ides?
<dom-module id="photo-album">
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.css"> <!-- photoswipe/photoswipe.css -->
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/default-skin/default-skin.css"> <!-- photoswipe/default-skin/default-skin.css -->
<template>
<style>
:host {
display: block;
}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
</style>
<iron-ajax url="" params="" handle-as="json" last-response="{{photos}}"></iron-ajax>
<!--<template is="dom-repeat" items="{{photos}}">
<iron-image style="width:400px; height:400px; background-color: lightgray;" sizing="cover" preload fade src="{{item}}"></iron-image>
</template>-->
<div class="my-gallery" id="gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
<img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
<img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.min.js"></script> <!-- photoswipe/photoswipe.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe-ui-default.min.js"></script> <!-- photoswipe/photoswipe-ui-default.min.js -->
<script>
Polymer({
is: 'photo-album',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.initPhotoSwipeFromDOM();
},
initPhotoSwipeFromDOM: function(){
var gallerySelector = this.$.gallery;
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
options.showAnimationDuration = 0;
options.hideAnimationDuration = 0;
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = this.$.gallery;
galleryElements.setAttribute('data-pswp-uid', 1);
galleryElements.onclick = onThumbnailsClick;
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
}
});
</script>
</dom-module>
It seems you're missing styles from photoswipe.css.