I have a carousel built with materialize css. I want to start carousel from middle item. But carousel to be start from second item.
link of carousel: link
What can I do?
Thanks in Advance!
Please next time add a snippet of code to understand better...
Btw... You can use the instance.set(x) to move the carousel to nth slide (as stated in the docs here)
Here is an example (just comment the instance.set(middle_slide); statement to see the difference):
document.addEventListener('DOMContentLoaded', function() {
//find wich slide is the middle one
var carousel_items = document.querySelectorAll('.carousel-item').length;
var middle_slide = Math.round(carousel_items / 2)
console.log('The slide in the middle is the ' + middle_slide + ' out of ' + carousel_items)
//Carousel initialization
var options = {};
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
//Set the carousel to show the middle slide first
var elem = document.querySelector('.carousel');
var instance = M.Carousel.getInstance(elem);
instance.set(middle_slide);
})
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
Here is the codepen if you prefere: https://codepen.io/LukeSavefrogs/pen/WPYOGE?editors=1010
Related
I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.
This is My Implementation.
const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
const main2 = hyperHTML.wire();
appIframeRender`${[
cbplugin.CharmListComponent.render(main2)
]}`;
cbplugin.WrapperComponent.render = function (render, data){
return render`
<style>
#import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
#import "https://fonts.googleapis.com/icon?family=Material+Icons";
#import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700";
</style>
<div>
<a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
<i class="material-icons">
3d_rotation
</i>
</a>
</div>
}
So My Doubt is Is it possible that material Icon is not supported in Hyper Html. The material Icon css are showing in the inspect element styles.
Thank you
Whenever you use Shadow DOM, you must import fonts in the main document:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...
I am trying to load a dicom image using cornerstone library. I get an error - uncaught exception: loadImage: no image loader for imageId.
I have my image file named as image-1.dcm. What am I doing wrong?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
jsminimal/index.html
</h1>
This is an example of the minimal use of cornerstone driven by javascript
<br>
<br>
In this example, javascript is used to image enable a div.
<br>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone-master/dist/cornerstone.js"></script>
<!-- include special code for these examples which provides images -->
<script src="cornerstone-master/example/exampleImageIdLoader.js"></script>
<script>
$(document).ready(function() {
var imageId = 'image-1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</html>
You need to use the cornerstoneWADOImageLoader to loader DICOM P10:
https://github.com/chafey/cornerstoneWADOImageLoader
I've been working on getting a youtube video to play as a pop-over in HTML5 using "fancybox". Only I cannot get it to pop-up! instead it always seems to open the page itself, which is completely against the point. I could use some advice on how to fix this, can you help? I have looked on stack-overflow but did not find a clear answer to this use case.
<!DOCTYPE HTML>
<html>
<head>
<!--fancy box-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- /fancy box-->
<!--fancy box-->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
<!-- /fancy box-->
</head>
<body>
<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">Youtube</a><br>
<a class="iframe" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">This goes to iframe</a><br >
<a class="iframe" href="http://www.example.com">This goes to iframe</a><br>
<a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
</body>
</html>
You're selecting elements from javascript which are non existent, check the IDs an Class of the anchor tags... for example ""a#single_image" should refer to an anchor tag with the attribute id='single_image', being not present, fancybox fails to initialize.
Same goes for a#inline and a.group ( it expects class='group' in the anchor )
You have to use the same class as fancybox uses for iframe: "fancybox.iframe"
Also use an youtube link that is embed., then everythings works fine.
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/usiOu1ZKJ4o">Youtube (iframe)</a>
.
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
Use the latest jquery library, the latest is now 1.9 you are using 1.4.
And also use fancybox.js instead of fancybox.pack.js. That should do the trick!! and also use fancybox.iframe as a class combining another class to trigger the fancybox function
Oke, try this:
Make sure the links to script and css are correct. In my case the subfolders are js and css.
first link includes a youtube video
second link an image.
<!DOCTYPE HTML>
<html>
<head>
<!--fancy box-->
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<!-- /fancy box-->
<!--fancy box-->
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<!-- /fancy box-->
</head>
<body>
<ul class="list">
<li>
<a class=" various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">youtube</a>
</li>
<li>
<a class="various" href="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" title="Lorem ipsum dolor sit amet"><img src="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" alt="" /></a>
</li>
</ul>
I have a website written in C# / ASP.NET. I try to add loading/waiting window while that page is loading. How can I do that in Asp.net? Thanks..
I solved it with DOJO. I used dijit.dialog. Here is a part of my code:
<head>
<!-- api's (you can use also google apis: https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js) -->
<link href="<%=Url.Content("~/Scripts/dojo/dijit/themes/tundra/tundra.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<link href="<%=Url.Content("~/Scripts/dojo/dojo/resources/dojo.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<script djconfig="parseOnLoad: true" type="text/javascript" src="<%=Url.Content("~/Scripts/dojo/dojo/dojo.js")%>"> </script>
</head>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.ContentPane");
// This is the function to show the spinning whell (or something else to demonstrate the loading progress)
function wheelShow() {
var dialog = new dijit.Dialog({ title: "Loading...", id: "wheel" });
dialog.setContent("<img style='height: 55px; width: 55px; text-align:center' src='../../Content/images/loader.gif' />");
dialog.show();
// hiding of close button in dialog
dojo.query("#wheel .dijitDialogCloseIcon").forEach(function(node, index, arr) {
node.style.visibility = "hidden";
});
}
</script>
<body class="tundra">
<!-- after the page will be completly loaded - hide the wheel -->
<div id="delayedContent" onload="dijit.byId('wheel').hide()">
<!-- your page content here... -->
</div>
</body>
I found something like that. It seems easy and practical to use :
http://www.codeproject.com/Articles/42344/AJAX-Enabled-MessageBox
Thanks for your answer by the way.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Services</title>
<link rel="shortcut icon"
type="image/x-icon" href="css/images/favicon.ico" />
<script language="javascript">
var XMLHTTPRequestObj=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObj=new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObj)
{
var obj=document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function() {
if(XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200) {
alert("Inside the ready status "+dataSource);
if(dataSource=="ajaximport/1.jpg") {
alert("The if loop is working");
document.getElementById(
"targetDiv").innerHTML =
XMLHttpRequestObj.responseText;
var img = document.createElement('img');
alert("Variable img Recorded "+img);
img.onload = function (e){
alert("Loading Image");
document.getElementById(
"imgHolder").width=this.width;
document.getElementById(
"imgHolder").height=this.height;
document.getElementById(
"imgHolder").src=this.src;
}
img.onerror = function(e){
alert("Error processing Image. Please try again."+e);
}
img.src = XMLHttpRequestObj.responseImage;
}
else
obj.innerHTML=XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
</script>
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
</head>
<body>
<!-- Content -->
<div id="content">
<!-- Shell -->
<div class="shell">
<h2>We at Creative bits 5 are plegded to serve you our best in.......</h2>
<table>
<th>
<div id="hold_left">
<ul>
<li><label>
<a href="#" onmouseover="getData('ajaximport/1.jpg','targetDiv')">
Graphic Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Web Devlopment
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Logo Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Walk-Through
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Modelling
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
2D Presentations
</a></label></li><br>
</ul>
</div>
</th>
<th>
<div id="targetDiv">
This is target
<img id="imgHolder" src="" alt="This is where image will load" />
</div>
</th>
</table>
</div>
<!-- end Shell -->
</div>
<!-- end Content -->
</body>
</html>
Hi I am Using ASP for my web project. but I got stuck with a problem when I tried loading an image into a target division when a mouse is hovered over a text describing that image.
The division holding the text is on the left side (which describes the loading image)
On the right side is the Target division.
All is fine when I used it to load a text from a .txt file but The problem started when I tried modifying the same code for loading an image in the same division instead of the text
My code is as above
If the image file is a physical file stored on the filesystem then XMLHttpRequest may not be such a good idea to load the image.
I would suggest that in your javascript code you can create an image and set the src to the image path. that would load it and your image onload routines can also run. furthermore, you would get the benefit of browser caching of the image.
It would have made sense to use XMLHttpRequest in case your image was stored as a BLOB somewhere and you need some mechanism to retrieve it. in that case have a look at this link.
Handling images from XMLHttpRequest (with HTML and Javascript)
hope this helps.
EDIT 1(in response to comment): You can have a separate method for setting images via JavaScript.that way the images can be handled by a separate function while dynamic data through XHR can be handled separately.
<script language="javascript">
var XMLHTTPRequestObj = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObj = new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if (XMLHttpRequestObj) {
var targetDIV = document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function () {
if (XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200)
{
targetDIV.innerHTML = XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
function getImage(dataSource, divID) {
//create image element
var img = document.createElement('img');
//assuming divID has the target div id
img.onload = function (e) {
alert("Loading Image");
document.getElementById(
divID).width = this.width;
document.getElementById(
divID).height = this.height;
}
img.onerror = function (e) {
alert("Error processing Image. Please try again." + e);
}
//set the path here
img.src = dataSource;
var targetDIV = document.getElementById(divID);
//clear contents of target div
if (targetDIV.hasChildNodes()) {
while (targetDIV.childNodes.length >= 1) {
targetDIV.removeChild(targetDIV.firstChild);
}
}
//finally add the image as a child control to the div.
targetDIV.appendChild(img);
}
</script>
and call this by onmouseover="getImage('Image/1.jpg','targetDiv')
please note that this is pure javascript code. you can always use a JS library such as JQuery to do the same work in very few lines of code.