I'm creating a web site to display products that I'm selling, and I'm struggling with the products page. I would like to have small images of each product, and be able to click them and then display the full products info in a separate div tag underneath the thumbnails.
I found a piece of code that I have used, and it works fine in Firefox, but in IE it doesn't display the thumbnail images and the links don't work.
I've spent 3 days googling and searching and I can't find a solution to this. I have attached my full code, please can some one point me in the right direction?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Seascape
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20131201
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vapes</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link href="defaultvape.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
#leftcolumn{
float: left;
width: auto;
height: auto;
border: 3px none black;
padding: 5px;
padding-left: 5px;
margin-left: 132px;
margin-top: -61px;
margin-right: 14px;
min-width: 1300px;
min-height: 300px;
}
#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}
#leftcolumn a:hover{
background-color: #FFCC00;
}
#rightcolumn{
float: left;
width: 1200px;
min-height: 400px;
border: 3px solid black;
margin-left: 66px;
padding: 5px;
padding-bottom: 5px;
margin-top: 12px;
margin-bottom: 143px;
min-width: 1450px;
background-color: #FFFFFF;
}
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Vape culture</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Vapes</li>
<li>Juice</li>
<li>Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="featured">
<div id="leftcolumn">
<div id="Thumbnail1"><a href="javascript:ajaxpage('ItasteEP.html', 'rightcolumn');">
<img src="images/EP/thumbnail.png" width="230" height="170" alt=""/></a></div>
<div id="leothunb"><img src="images/LeoPro/leothumbnail.png" width="230" height="170" alt=""/></div>
<div id="VVthumb"><img src="images/VV/VVthumbnail.png" width="230" height="170" alt=""/></div>
<div id="MVDthumb"><img src="images/mvp/MVPthumbnail.png" width="230" height="170" alt=""/></div>
<div id="SVDthumb"><img src="images/sVd/sVdthumbnail.png" width="230" height="170" alt=""/></div>
<div id="VTRthumb"><img src="images/tvr/VTRthumbnail.png" width="230" height="170" alt=""/></div>
<div id="new134tag"><img src="images/134/134thumbnail.png" width="230" height="170" alt=""/></div>
<div id="coolfire1thumb"><img src="images/coolfire1/Coolfire1thumbnail.png" width="230" height="170" alt=""/></div>
<div id="Coolfire2thumb"><img src="images/coolfire2/Coolfire2thumbnail.png" width="230" height="170" alt=""/></div>
<div id="AIOthumb"><img src="images/aio/aoithumbnail.png" width="230" height="170" alt=""/></div>
</div>
<div id="rightcolumn"><h3><img src="InnokinHeaderV1.png" width="1450" height="400" alt=""/></h3>
</div>
<div style="clear: left; margin-bottom: 1em"></div>
</div>
<div id="banner-wrapper">
<div id="banner" class="container">
<div class="box-left">
<h2>Mauris vulputate dolor nibh</h2>
<span>Donec leo, vivamus fermentum praesent urna congue rutrum</span> </div>
<div class="box-right"> Etiam posuere</div>
</div>
</div>
<div id="copyright" class="container">
<p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by Fotogrph | Design by FreeCSSTemplates.org.</p>
</div>
</body>
</html>
If you want to dynamically set the text in the #rightcolumn upon click, you can use jQuery.
First, include jQuery like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then, use .click event handler for each image to handle mouse clicks and load the text from specified HTML files.
For example, for the first div (#Thumbnail1):
Assing an id to the image like:
<img src="images/EP/thumbnail.png" width="230" height="170" alt="" id="img_1" />
Then, in area, define onclick handler as:
$( "#img_1" ).click(function() {
$('#rightcolumn').load('ItasteEP.html');
});
Repeat this step for all images.
Related
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I am using a connector framework called js-graph-it to connect elements on my web page. When I am running an html file to as a demonstration of working of this project it works fine but when I am including this into the project, connecting lines are missing.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="js-graph-it.css">
<style>
.canvas {
font-family: tahoma;
}
.block {
position: absolute;
border: 1px solid #7DAB76;
background-color: #BAFFB0;
padding: 3px;
}
/*.connector {
background-color: #FF9900;
}*/
.source-label, .middle-label, .destination-label {
padding: 5px;
}
</style>
</head>
<body onload="initPageObjects();">
<div class="canvas"
style="width: 1350px; height: 1250px;">
<h1 class="block" id="h1_block"
style="left: 100px; top:10px;">
h1 block
</h1>
<h2 class="block" id="h2_block"
style="left: 800px; top: 100px;">
h2 block
</h2>
<h3 class="block" id="h3_block"
style="left: 100px; top: 180px;">
h3 block
</h3>
<h2 class="block" id="h4_block"
style="left: 100px; top: 480px;">
h2_new block
</h2>
<!-- <div class="connector h1_block h2_block"></div>
<img src="arrow.gif" class="connector-start">
<img src="arrow.gif" class="connector-end">
<label class="source-label">start</label>
<label class="middle-label">middle</label>
<label class="destination-label">end</label>
</div> -->
<div class="connector h1_block h2_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h3_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h4_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
</body>
</html>
and JSFiddle link
I am also attaching the screenshot as a proof that it is working as a standalone file.
Change onDomready to No wrap - in <head> in JSFiddle: http://jsfiddle.net/j6nhc9y1/3/
Basically, with those “wrapped” options the initPageObjects function won’t be on the top level where it needs to be in order to be called from an HTML inline event handler.
A better alternative would be to create dynamic event handlers within the script, e.g.:
window.addEventListener('load',initPageObjects);
I'm making a page that has javascript bubble links and I want a slideshow on it. It seemed to work fine, but then after making a couple other pages with slideshows, they all broke. I'm not sure why because they all have different names with different javascripts and they're all in the right place. I'm going to paste all the code I have for one page. I have a folder named jewelry that has the pictures and the javascript, however the html page is in the main folder, but I have it labeled as such. Is there something that I'm missing or need to take away? I'd like to note that the javascript got is pretyy much completely from a javascript book ( I just changed the file locations and the captions) so that should be pretty good. It's mostly the html. I want my navigation to work with my slideshow. It'll show the first image, but then the buttons won't go to the next slide.
If you have any suggestions for easier coding, go ahead. Otherwise, I'd just like to get this fixed. My final project is due in a couple days and idk how to fix this! I don't have it all uploaded to an actual link so you'll have to work with the snippets I gave you - which is literally my whole entire page and all my javascript.
Thanks in advance.
window.onload = initAll;
var currImg = 0;
var captionText = [
"Mostly bracelets right now",
];
function initAll() {
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = function() {
newSlide(-1);
}
document.getElementById("nextLink").onclick = function() {
newSlide(1);
}
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow1").src = "jewelry/bracelet" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="jewelry/jewelry.js"></script>
<style>
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 450px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
height:45px;
width:100%;
background-color:#EAC5E4;
position:relative;
bottom:-0;
font-style: italic;
}
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="content">
<div class="title"> </div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div id="horizon">
<div id="stuff">
<h2> Jewelry Gallery </h2><br>
<img src="jewelry/bracelet0.jpg" alt="My Jewelry" id="slideshow1"></img>
<div id="imgText"> </div>
<div id="chgImg">
<input type="button" id="prevLink" value="« Previous">
<input type="button" id="nextLink" value="Next »">
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<a href="http://kiya-rose.deviantart.com/">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="https://www.facebook.com/thinkjewelryy">
<img height="32" width="32" alt=" Think Jewelry Page" src="facebook.png">
</a>
Copyright© Brittany Rose
</footer>
</body>
</html>
Why "CaptionText" array has just one single item in it? In this case your slide index always will be "0".
var captionText = [
"Mostly bracelets right now",
];
I added an image carousel to my site and everything worked great until I tried to add a href tag around the img scr link. it pushes the image out of the slider I have put a link to what it looks like below. I did think it was some css pushing it out but after removing all the surrounding tags the image just stayed the same. I need this so i can add a lightbox to the image when clicked.
Link to image of slider
https://dl.dropboxusercontent.com/u/9833562/caratest.png
I couldn't get it to work on JSFiddle so here is a link to download my files
http://jonathanlowe.co.uk/ws/download/carousel_file.zip
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>TEST</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chgrid.css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
CSS
<style media="screen">
.containerslide {
width: 90%;
height: auto;
position: relative;
margin: 0 auto;
}
.roundabout-holder {
padding: 0px;
margin: 0 auto;
height: 310px;
width: 100%;
}
.roundabout-moveable-item {
height: 350px;
width: 380px;
cursor: pointer;
display:block;
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
#carousel-descriptions {
list-style:none;
display:block;
width:850px;
padding:0;
}
#carousel-descriptions li {
font-size:24px;
font-weight:bold;
text-align:center;
display:none;
}
#carousel-descriptions li.current {
display:block;
}
#carousel-controls2 {
max-width:920px;
margin:25px auto;
overflow:auto;
}
#carousel-controls2 span {
width:100px;
font-size:14px;
text-align:center;
margin:0 5px;
cursor:pointer;
background:#fff;
}
#carousel-controls {
width: 320px;
margin:25px auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
margin-top: -20px;
}
#carousel-controls span {
height: 13px;
width: 13px;
display:inline-block;
font-size:14px;
text-align:center;
margin:0 5px;
padding:1px;
cursor:pointer;
border:0.5px solid black;
background:#c6c6c6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 6px; /* for old Konqueror browsers */
}
#carousel-controls .current {
background:#000;
color:;
}
#carousel {
margin-bottom:-25px;
}
#carousel img{
padding: 30px;
}
#carousel img:hover {
padding:0px;
}
.prev-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.next-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
}
</style>
</head>
HTML
<body>
<div class="text-inter">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<section class="containerslide">
<div id="carousel">
<a href="#">
<img src="img/mactest.png" alt="" class="slide" style="" />
</a>
<img src="img/mactest.png" height="50px" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
</div>
</section>
<div id="carousel-controls2" >
<span><div class="prev-button" style=""><<</div></span>
<span><div class="next-button" style="">>></div></span>
<div id="carousel-controls" >
<span class="control current"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</div> <!-- col-md-12 End -->
JAVASCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
<!-- Roundabout Script Start -->
<script type="text/javascript">
(function($) {
var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
.roundabout({childSelector:"img",
minOpacity:1,
autoplay:false,
autoplayDuration:50000000,
btnNext: true,
btnPrev: true,
maxZ:380,
minZ:200,
maxScale: 0.99,
responsive:true,
clickToFocus: false,
autoplayPauseOnHover:true })
.on('focus', 'img', function() {
var slideNum = $carousel.roundabout("getChildInFocus");
$descriptions.add($controls).removeClass('current');
$($descriptions.get(slideNum)).addClass('current');
$($controls.get(slideNum)).addClass('current');
});
$controls.on('click dblclick', function() {
var slideNum = -1,
i = 0, len = $controls.length;
for (; i<len; i++) {
if (this === $controls.get(i)) {
slideNum = i;
break;
}
}
if (slideNum >= 0) {
$controls.removeClass('current');
$(this).addClass('current');
$carousel.roundabout('animateToChild', slideNum);
}
});
}(jQuery));
</script>
<script>
$('.next-button').on('click', function() {
$('#carousel').roundabout("animateToNextChild")
});
$('.prev-button').on('click', function() {
$('#carousel').roundabout("animateToPreviousChild")
});
</script> <!-- Roundabout Slider End -->
</body>
</html>
You could use data-attributes and set up your links with jQuery (to avoid having to edit your roundabout.js implementation. JSFiddle DEMO
<img src="http://lorempixel.com/200/200"
class="slide"
data-link="http://www.google.com" />
// this function should be in your page load function
$('.slide').click(function(){
window.open($(this).attr("data-link"), "_blank");
// you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});
// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
cursor: pointer;
}
I have been playing around with dropping some code from a html bootmetro page into a cshtml page.
When I run the original html page in the cshtml project it works fine; however, when I run the same code within a cshtml page a jquery feature to change the background colour to dark which is triggered by a settings icon returns this error:
Timestamp: 05/06/2013 13:46:56
Error: TypeError: $(...).charms is not a function
Source File: http://*l*o*c*a*l*h*o*s*t*:24349/assets/js/demo.js
Line: 29
I have tried the following answers that I researched with no joy:
• Put the code in #section scripts within the cshtml page:
#section scripts {
<script>
</script>
}
• Never hardcode urls in an ASP.NET MVC application. Always use helpers (or bundles which are recommended):
• Make sure that at the end of your _Layout.cshtml you don't have a
#Scripts.Render("~/bundles/jquery") call because this would include jQuery twice.
• If at the end of your _Layout.cshtml you have a dedicated section for custom scripts like #RenderSection("scripts", required: false), make sure that you have placed your custom script in that section (notice that since this RenderSection is at the end of the DOM you don't need to be wrapping your script in a document.ready event because by the time it executes, the DOM will already be loaded):
• Put the script tags in the Partial View itself where the form is generated from, it now knows what control to bind it to.
Here is the cshtml page:
#{
}
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>bigint</title>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
<link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
<link rel="stylesheet" type="text/css" href="content/css/icomoon.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/js/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script src="assets/js/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- bigInt favicon -->
<link href="../bigInt_fav.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Jumbotron button styling removed as it affects modal button size */
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
.logo{
position:absolute;
left:10px;
top:10px;
}
</style>
<!-- I had to move a.trigger and active from stylex to here as links to plus & minus png did not work -->
</head>
<body data-accent="blue">
<div id="top-info" class="pull-right">
<a href="#" class="pull-left">
</a>
<a id="settings" class="pull-left" href="#">
<b class="icon-settings"></b>
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="metro span12">
<div class="metro-sections">
<div id="section1" class="metro-section tile-span-4">
<h2>bigint Pages</h2>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/metro-tiles.jpg" />
</div>
<div class="column-text">
<div class="text4">Finished looking at the Windows 8 Metro style theme - then return home</div>
</div>
<div class="app-label">bigint Home</div>
</a>
<a class="tile wide imagetext wideimage bg-color-orange" href="./Home_Slide.html">
<img src="content/img/appbar.png" alt=""/>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
<a class="tile app wide bg-color-greenDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-home"></b>
</div>
<div class="app-label">Contact</div>
</a>
<a class="tile app bg-color-purple" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-list"></b>
</div>
<span class="app-label">Services</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-share"></b>
</div>
<span class="app-label">Projects</span>
</a>
<a class="tile app bg-color-yellow" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<span class="app-label">Quality Improvement</span>
</a>
<a class="tile app bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-globe"></b>
</div>
<span class="app-label">Icons</span>
</a>
</div>
<div id="section2" class="metro-section tile-span-4">
<h2>Other bigint Sites </h2>
<a class="tile wide imagetext bg-color-blue" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<div class="column-text">
<div class="text">Grid system</div>
<div class="text">Layouts</div>
<div class="text">Responsive design</div>
</div>
<span class="app-label">bigint Blog</span>
</a>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Coding app.png" />
</div>
<div class="column-text">
<div class="text">Typography</div>
<div class="text">Tables</div>
<div class="text">Forms</div>
<div class="text">Buttons</div>
</div>
<span class="app-label">bigint Jetstrap</span>
</a>
<a class="tile app bg-color-orange" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img//RegEdit.png" alt="" />
</div>
<span class="app-label">Parners</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Devices.png" alt="" />
</div>
<span class="app-label">Portfolio</span>
</a>
<a class="tile wide imagetext wideimage bg-color-white" href="./Home_Slide.html">
<iframe src="http://www.bigint.biz" width="306" height="200"></iframe>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="charms" class="win-ui-dark">
<div id="theme-charms-section" class="charms-section">
<div class="charms-header">
<a href="#" class="close-charms win-command">
<span class="win-commandimage win-commandring"></span>
</a>
<h2>Settings</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="">
<label for="win-theme-select">Change theme:</label>
<select id="win-theme-select" class="">
<option value="metro-ui-semilight">Semi-Light</option>
<option value="metro-ui-light">Light</option>
<option value="metro-ui-dark">Dark</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='assets/js/jquery-1.8.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootmetro.js"></script>
<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
<script type="text/javascript" src="assets/js/demo.js"></script>
<script type="text/javascript" src="assets/js/holder.js"></script>
<script type="text/javascript">
$(".metro").metro();
</script>
</body>
</html>
Here is the siteLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Page.Title</title>
<!-- Original <link href="~/Content/Site.css" rel="stylesheet" /> CSS -->
<link href="#Href("~/bigInt_fav.ico")" rel="shortcut icon" type="image/x-icon" />
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Slideout CSS -->
<link rel="stylesheet" href="stylex.css" type="text/css" media="screen" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
footer#site-footer {
padding-left: 20px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.twitter{ background:url('images/Facebook_Cracked-48x48.png'); }
.delicious{ background:url('images/Twitter_Cracked_48x48.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
</style>
<!-- Default Asp.net Script -->
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- Header section with social icons -->
<header id="banner">
<!-- Script for spinning icons -->
<div class="spinning_icons">
<div class="social">
<img src="../images/Facebook_Cracked-48x48.png" alt="Follow Us On Facebook">
<img src="../images/Twitter_Cracked_48x48.png" alt="Follow Us On Twitter">
<img src="../images/Linkedin_Cracked-48x48.png" alt=" photo Linkedin_Cracked.png">
</div></div>
</br></br></br>
<!-- Top navigation bar-->
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Services</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
<!-- End of top navigation bar-->
</header>
<!-- Asp.net body tag - no need to comment as in use -->
<div id="body">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
Finally, here is demo.js with the function problem on line 29:
$(function(){
// this is for the appbar-demo page
if ($("#appbar-theme-select").length){
$("#appbar-theme-select").change(function(){
var ui = $(this).val();
if (ui != '')
$("footer.win-commandlayout")
.removeClass("win-ui-light win-ui-dark")
.addClass(ui);
});
}
// style switcher
if ($("#win-theme-select").length){
$("#win-theme-select").change(function(){
var css = $(this).val();
if (css != '')
updateCSS(css);
});
}
$("#settings").click(function (e) {
e.preventDefault();
$('#charms').charms('showSection', 'theme-charms-section'); // LINE 29
});
// listview demo
$('#listview-grid-demo').on('click', '.mediumListIconTextItem', function(e){
e.preventDefault();
$(this).toggleClass('selected');
});
//$('#home-carousel').carousel({interval: 5000});
});
//function to append a new theme stylesheet with the new style changes
function updateCSS(css){
$("head").append('<link rel="stylesheet" type="text/css" href="content/css/' + css +'.css">');
if($("link[href*=metro-ui-]").size() > 1){
$("link[href*=metro-ui-]:first").remove();
}
};
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
var $window = $(window)
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
e.preventDefault()
})
// side bar
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
// make code pretty
window.prettyPrint && prettyPrint()
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
**, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
selector: '.show-grid > div'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('#myCarousel').carousel()
// javascript build logic
var inputsComponent = $("#components.download input")
, inputsPlugin = $("#plugins.download input")
, inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked'))
})
$('#plugins.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
})
$('#variables.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.download-btn').on('click', function () {
var css = $("#components.download input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins.download input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /\?dev/.test(window.location) ? 'http://*l*o*c*a*l*h*o*s*t*:3000' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
, img: img
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)**
I have had to strip quite a bit out of the pages to meet the allowed character limit in the code sections; everything should be there for the metroui background colour switch though.
Thanks everyone for looking/ helping.
Where are you running the cshtml page from? What is the context?
Charms() seems like a metro function that isn't available from your current context. You probably have to explicitly add a reference to whatever library/script that holds that function/plugin.