JQuery widgets - menu and slideshows?
I'm a teacher and I'm teaching a basic web design class.
in CS6 it was so easy to add a menu and image slide shows using spry
In dreamweaver cc I have seen in examples the jQuery has a menu option but mine does not. Any idea how I can find/activate that option?
Also is there a widget I can get for my students for slideshows? I haven;'t been able to find one that doesn't require writing a lot of code. While some of my students are really grasping code and would be ok I have many that code is still Greek to them.
I would really like to find a widget for them to use.
Thanks
Don't know of any free widgets but plenty of reasonably simple solutions for sliders you can use.
Check out cycle 2
Cycle2
and
Flexslider
http://www.woothemes.com/flexslider/
Both require some hand coding but nothing very complex.
Similar Messages
-
Nav bar sub menu and Slideshow not displaying in preview?
Hi,
My website, markmillerdesign.com hosted by godaddy is not displaying the sub menu or the images to the slide show.
I had to relink all of my assets because my computer was restored, but they all work until i preview in a browser or upload site.
My Nav menu is set to show all pages but the sub menu is still not working or coming up?
I have even made new slideshows and reinstalled images but they still do not come up in preview mode or on the web.
Is there a way I can diag this? Any ideas?
Please help!
Thanks.I am now getting this same error on all of my websites. some of them I havent uploaded to or even updated for quite a while, is this a muse issue since the last update?
Please help ! -
In Browser Editing-June 2014 Muse Update-Only Working With Widget Menu
As a non-BC user, I'm now able to accomplish in browser editing from my hosting company. However, I found that I cannot navigate to any pages that are not attached to a widget menu and edit them. Clicking on an in-website link not associated with the widget menu will take me to that page but not allow any editing to be done. It also does not load the page name in the address bar.
I did find a work-around with this: change the page name in the address bar to the non-menu-widget webpage name. It loads the page and allows editing. Not really user-friendly when trying to teach my clients how to conduct their own website edits. You have to supply them with every non-menu-widget page name to edit them. Ugh!
Does anybody know if Adobe is working on this? Can anyone suggest an easier work-around?Could you share what site you are trying to edit? I haven't been able able to reproduce this problem.
When hovering over an object (text frame in this example) that has a hyperlink, a "Click" button should appear that allows the user to follow the link instead of editing the link text.
If only part of the text contains the hyperlink, the click button does not appear, but a small arrow shows when hovering over the link indicating that the click will follow the link. -
Make a logo over lap menu bar and slideshow
Hi!
I want to have the logo of my page overlapping the menu bar and the slideshow.
Below is a picture og how the site layout looks now and the code.
Can anyone please help me out.
Thanks in advice,
Simon
Code
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#</title>
<meta name="description" content=" add description ... " />
<meta name="keywords" content=" add keywords ... " />
<!-- //////// Favicon //////// -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- //////// Css - stylesheets //////// -->
<link href="_layout/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="_layout/style-print.css" rel="stylesheet" type="text/css" media="print" />
<!-- //////// jQuery //////// -->
<script src="_layout/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<!-- //////// DD_belatedPNG - png fix for IE6 //////// -->
<!--[if IE 6 ]>
<script src="_layout/js/pngfix/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<![endif]-->
<!-- //////// Cufon - font Replacement //////// -->
<script src="_layout/js/cufon/cufon.js" type="text/javascript"></script>
<!-- //////// Tipsy - tooltips //////// -->
<script src="_layout/js/tipsy/jquery.tipsy.js" type="text/javascript"></script>
<link href="_layout/js/tipsy/css.tipsy.css" rel="stylesheet" type="text/css" />
<!-- //////// prettyPhoto - lightbox //////// -->
<script src="_layout/js/prettyphoto/jquery.prettyPhoto.js" type="text/javascript"></script>
<link href="_layout/js/prettyphoto/css.prettyPhoto.css" rel="stylesheet" type="text/css" />
<!-- //////// Validity - form validation //////// -->
<script src="_layout/js/validity/jquery.validity.js" type="text/javascript"></script>
<link href="_layout/js/validity/css.validity.css" rel="stylesheet" type="text/css" />
<!-- //////// Cycle - content slider //////// -->
<script src="_layout/js/cycle/jquery.cycle.all.min.js" type="text/javascript"></script>
<!-- //////// Tabify - create tabs //////// -->
<script src="_layout/js/tabify/jquery.tabify-1.4.js" type="text/javascript"></script>
<!-- //////// Accordion - create accordions //////// -->
<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script>
<!-- //////// Custom Js //////// -->
<script src="_layout/js/scripts.js" type="text/javascript"></script>
<script src="_layout/js/plugins.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
color: #2eabeb;
a:active {
text-decoration: none;
-->
</style><noscript>
<link href="_layout/style-nojs.css" rel="stylesheet" type="text/css" />
<div class="nojs-warning"><strong>JavaScript seems to be Disabled!</strong> Some of the website features are unavailable unless JavaScript is enabled.</div>
</noscript>
<div id="wrap">
<div id="header">
<div class="img"><a href="#"><img src="_layout/images/Logo.png" /></a> </div>
<ul id="menu">
<li><a href="#" class="drop"></a>
<!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
<!-- End 4 columns container -->
</li>
<!-- End Home Item -->
<li><a href="#" class="drop">Projects</a>
<!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
</div>
<!-- End 4 columns container -->
</li>
<!-- End 5 columns Item -->
<li><a href="#" class="drop"></a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"> </a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#">NetTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
</ul>
</div>
<div class="col_1">
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li><a href="#" class="drop"></a>
<!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#">Area </a></li>
<li><a href="#"> </a></li>
<li><a href="#">l</a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">Pt</a></li>
<li><a href="#">s</a></li>
<li><a href="#">t</a></li>
<li><a href="#"></a></li>
<li><a href="#">Sn</a></li>
<li><a href="#">s</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<br />
<ul>
<li><a href="#">t</a></li>
<li><a href="#">Pn</a></li>
<li><a href="#">Sn</a></li>
<li><a href="#">s</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#">Pt</a></li>
<li><a href="#">I</a></li>
<li><a href="#">st</a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<!-- End 4 columns container -->
</li>
<li><a href="#" class="drop">Sales Support</a>
<!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">i</a></li>
</ul>
</div>
<br />
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop"></a>
<!-- Begin 4 columns Item -->
<div class="dropdown_4columns">
<!-- Begin 4 columns container -->
<div class="col_4">
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<li class="menu_right"><a href="#" class="drop">Main</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#"><strong></strong></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</li>
</ul>
<div class="row slideshow-container no-print fixed">
<div id="slideshow-index">
<ul>
<li>
<div class="slidetext">
<h2>Proin porttitor<br /> pulvinar risus nec</h2>
<p>Sed interdum eleifend mollis. Proin quis lectus libero. Integer eu lectus erat, id aliquet risus.
Vivamus vitae mollis purus. Fusce id diam at purus sodales mollis. <a href="#">more</a></p>
</div>
<img src="images/slider/1.jpg" width="948" height="400" alt="" /> </li>
<!-- end slide 1 -->
<li>
<img src="images/slider/2.jpg" width="948" height="400" alt="" />
<div class="slidetext">
<h2>Curabitur<br /> sed sollicitudin orci.</h2>
<p>Nunc eu tellus sed felis vestibulum pulvinar sed ac enim. Quisque tincidunt urna id arcu egestas
a rhoncus purus molestie erat eget nunc varius. <a href="#">more</a></p>
</div>
</li><!-- end slide 2 -->
<li>
<img src="images/slider/3.jpg" width="948" height="400" alt="" />
<div class="slidetext">
<h2>Suspendisse vest<br /> pretium laoreet</h2>
<p>Aliquam erat volutpat. Maecenas tincidunt porta hendrerit. Sed quis tristique nulla. Fusce volutpat
lobortis tellus sed tincidunt consequat egestas a elementum dolor. <a href="#">more</a></p>
</div>
</li><!-- end slide 3 -->
<li>
<img src="images/slider/4.jpg" width="948" height="400" alt="" />
<div class="slidetext">
</div>
</li><!-- end slide 4 -->
</ul>
<div id="index-slideshow-pager"> </div>
</div><!-- end #slideshow -->
<!-- ////////////////HERTIL ER ALT RETT ///////////////////////////////////////////////////////////////////////////////////////// ////////////////// -->
<div id="content">
<table width="948px" height="40px" margin="margin: auto 6px auto 6px">
<tr>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
</tr>
</table>
<br />
<div class="venstre" style="width: 530px; margin: auto 6px auto 40px;">
<h2>Heading</h2>
<p>
Text </p>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div><!-- end #content -->
<!-- ///////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////// -->
</div><!-- end #header -->
</div><!-- end #wrap -->
<!-- KOPIER HERFRA ORGINALE FININI/////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////// -->
<div style="background: url(images/footer.png) no-repeat; position: bottom; margin: auto 6px 40px 6px; color: #ffffff;">
<div id="fot" style="width: 940px; float:center; text-align: left; margin-left: 40px; margin-right: 40px; padding-top: 25px; color: #ffffff;">
<table style="border: 0px;">
<tr style="border: 0px;">
<td width="146px" style="border: 0px;">
*table*
</table>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<!-- analytics code here -->
<!-- /TIL HIT////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////// -->
</body>
</html>
CSS:
/* =RESET
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym, address,
big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,d t,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:;border:0;outl ine:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-a lign:baseline}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{ border-collapse:separate;border-spacing:0}/* tables still need 'cellspacing="0"' in the markup */caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:b efore,q:after{content:""}blockquote,q{quotes:""""}
/* =GENERAL
div.img
margin-left:6px;
z-index:200;
body, ul, li {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
#menu {
list-style:none;
width:870px;
margin:0px auto 0px 44px;
height:40px;
padding:0px 20px 0px 20px;
z-index:100;
/* Background color and gradients */
background: #636363;
background: -moz-linear-gradient(top, #636363, #353535);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#353535));
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:5px;
margin-top:5px;
border:none;
z-index:100;
#menu li:hover {
border: 1px solid #777777;Thanks Nancy,
However, two new issues appeared when I added the float, both the text in the menu and the image slider is now too far left.
See image below. -
Nube needs help inserting a JQuery horizontal menu bar into my site-help.
Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
This post is in regard to the menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
or how to insert it into my site.
Please help.
Why can't I see the nav bar in the site when I paste in?
All I see is the text and no images. I know I am pasting the code in the wrong place.
Where do I insert it?
Below is the code for the site and below that is the code for the menu bar.
Where do I insert it? Help.
Thank you in advance for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #ffffff;
background-color: #<span class="navmainbg">003366</span>;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffff00;
background-color: #<span class="submenubg">003366</span>;
ul#navlist li a:active
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
<div id="slideshow">
<div id="slideshow">
<div align="center">
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
<div data-ertype="content" style="display: none;"><ul data-erlabel=>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
<img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplateName="NONE" style=""> <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
<div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> <!-- modify the float on this element to make left/right/none=center aligned. -->
<span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
<span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
</span>
<span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
</div>
</div>
<div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
<div align="center">
<!-- <div style="float: left; padding: 6px 18px 3px 0; font-weight: bold;">Title text!</div> -->
</div>
<div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
<div align="center">Title1 </div>
</div>
<div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
<div align="center">Title2 </div>
</div>
</div>
<div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
<br /><br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
<br /><br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
</div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</div>
<!-- End DWUser_EasyRotator --></div>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>
Below is the code for the JQuery menu with sub and secondary sub menus:
<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
<!-- <![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexNav - Flexible, Device Agnostic Navigation</title>
<link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14pt;
body {
background-color: #FFF;
a:link {
color: #FFFFFF;
text-decoration: none;
a:visited {
color: #FFF;
text-decoration: none;
a:hover {
color: #F00;
text-decoration: none;
a:active {
color: #900;
text-decoration: none;
</style>
<script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="container">
<header id="site-header">
<div class="menu-button">Menu</div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
\ </div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</body>
</html>Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list.
(see below).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9 />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<style type="text/css">
img {margin:6px; border:solid 2px #FFF;}
img:hover {background: #666;}
</style>
<link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="#"
<div class="menu-button"></div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
</div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html> -
PrettyPhoto JQuery Widget coding?
Hi I have a website I am designing above is the thumbnail, in the middle of the thumbnail I have it linked to PrettyPhoto JQuery Widget with name of image floating on the top of the slideshow, and I am wanting to do this also with the bottom "view details" grey box, but would like some help please with the coding! Here is the code I have currently:
<li class=' even portfolio-entry illustration '><img src="images/portfolio thumbnails/illustration & fashion/1_britten.jpg" width="220" height="240" alt="Britten Motorcycle illustration ">
<div class="entry-thumb standard"><a class="thumblink" href="images/portfolio images - new/illustration & fashion/1_britten_lge.jpg" rel="prettyPhoto[2376]"><img src="images/portfolio thumbnails/illustration & fashion/1_britten.jpg" alt="Britten Motorcycle illustration" class="thumbnail" ><span class="extra"></span></a></div>
<div class='entry-title'><span>Illustration & Fashion</span><a href='link here' title='Permanent Link to Soft Shop' rel='bookmark'>Soft Shop</a></div>
<a class="more-link" href="images/portfolio images - new/illustration & fashion/1_britten_lge.jpg" rel="prettyPhoto[2376]">veiw project</a></li>
Many thanksSorry, I'm not familliar with PrettyPhoto widget.
Can you upload your test page and supporting files to your web server and post a link for us to see in our browsers?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Jquery widget equivalent to spry dataset for dreamweaver CC 2014.1?
I built a website a while back with either CS4 or CS5. I used spry datasets to pull menu items into the tables on the website. I did some research and found that spry widgets were pulled from the CC suites for some reason and replaced with jquery widgets. I'm not 100% sure why adobe did this, but what jquery widget equivalent is there for the spry datasets in dreamweaver cc 2014.1?
Thanks for your help everyone!
-JoeThe closest that you will get to it http://www.dmxzone.com/go/21863/html5-data-bindings
-
I go to file and export then a window appears with file export, webpage,quicktime and slideshow. On my mini I have shutterfly as an option and don't remember how to do it. What do I do to input this info so that shutterfly becomes an option
Hi Barbara
Are your photos in iPhoto or are you using some other Photo Software?
The latest version of iPhoto is a lot different than iPhoto 6 for example. In iPhoto 06 you could burn the Originals from your User Picture Folder using Finder, while in iPhoto 11 it is best to burn them from within the iPhoto Application.
Open iPhoto and select the Event(s) that you want to burn onto the CD, then select Share on the menu bar and click Burn in the drop down.
http://www.apple.com/support/iphoto/
Then again, maybe you got a bad batch of blank CD's and need to try another?
Dennis -
Widget menu not displaying correctly
Hi,
I've created a web site and uploaded it to the FTP server to check it works OK and I've found the home page menu doesn't display correctly, but every other page is OK.
The drop down 'sub-menu' is getting clogged up in it's layout.
See here:
all the other pages display correctly and look like this:
Because the menu is generated by Muse as a widget, (I've just edited colours etc) why should 1 page display differently to the others?
I have this in the Master file, so I'm not making duplicate menus on each seperate page... the one widget serves all the pages.
Any ideas?
Thanks a lot.If you have inserted the menu on the Master page, then ideally it should appear even and remain unselectable/uneditable on all of the content pages.
Does the menu appear distorted in Design mode for the homepage too or only when you preview in browser/after publish?
I believe you're using the "All Pages" menu type and by looking at the screenshots, it appears that the Products menu item is overlapping the Education menu item. Did you try making a copy or delete the menu and re-insert in Master page? Can you do a Select All on the Home page and check if you don't have an identical but mis-aligned manual menu overlapping the original menu?
If the problem persists, can you share a link to the website for us to have a look?
Thanks,
Vinayak -
CS6: Widget Browser and LightBox Gallery Widget
I am a student-- i am presently taking a dreamweaver CS6 class. i think understand correctly that the widget browser and the lightbox gallery widget are no longer available. if so, what do i for the replacement??? thx.
Primer for using jQuery plugins.
Alt-Web Design & Publishing: Primer for Using jQuery Plug-Ins
In addition, the Adobe Exchange has DW Extensions/Add-ons you could install with your CS6 Extension Manager.
Adobe Exchange
Nancy O. -
Widget browser and Adobe Help not opening in dw cs6
I am trying to insert a widget in dw, but I cannot get the widget browser to open. I have dw cs6 installed in my applications folder along with Adobe>Widget Browser and Adobe help. How can I get this to work?
What version of Mac OS are you using?
If you're not sure, go to the Apple menu and choose About This Mac.
What happens when you try to open Widget Browser directly from the /Applications folder?
How about if you try to open it from within Dreamweaver? (e.g. go to Insert > Widgets, then click the "Widget Browser" link)
Have you tried updating Adobe AIR, which is used to run Widget Browser?
Although it typically will automatically update itself, you can download the latest version of AIR from here to install: http://get.adobe.com/air/ -
Upgraded to OS X 10.9 and Slideshow in iPhoto stopped working (stays on first slide; will not advance)
Apply the two fixes below in order as needed:
Fix #1
1 - launch iPhoto with the Command+Option keys held down and rebuild the library.
2 - run Option #4 to rebuild the database followed by Option #1 to reapair permissions if #4 doesn't help.
Fix #2
Using iPhoto Library Manager to Rebuild Your iPhoto Library
1 - download iPhoto Library Manager and launch.
2 - click on the Add Library button and select the library you want to add in the selection window..
3 - Now that the library is listed in the left hand pane of iPLM, click on your library and go to the Library ➙ Rebuild Library menu option.
4 - In the next window name the new library and select the location you want it to be placed.
5 - Click on the Create button.
Note: This creates a new library based on the LIbraryData.xml file in the library and will recover Events, Albums, keywords, titles and comments but not books, calendars or slideshows. The original library will be left untouched for further attempts at fixing the problem or in case the rebuilt library is not satisfactory.
If still not working log into another user account on your Mac and try a slideshow from there. If it works there then the problem is limited to your account. If it fails there it's system wide and may require a reinstall of iPhoto or the system. -
I do a movie whith iMovie. I finalize the project and I pass it to iDvd. Then I do a little menu and I burn my DVD. When I play my DVD on a computer or in my TV it ALWAYS begins directly with the movie and not with the menu... PLEASE HELP!!!!
Go to the Map mode in your iDVD project and make sure the blue bin at the left is empty. That's where you drag slideshows to if you want the DVD to open immediately to that slideshow and bypass the menu.
Click to view full size
If there is an item in there drag it out.
OT -
Simple CSS - Jquery Dropdowwn Menu
Hi, I want to try to build myself a simple jquery dropdown menu instead of trying to customize an existing one.
I also am planning to use a background image with corners and drop shadow. Should I used CSS3 for this? Or stick with images for now?
Does anyone know of a good tutorial on this?
ThanksI like jQuery SuperFish. It works in all browsers and it's easy to customize with CSS and built-in jQuery functions.
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
I agree with bemdesign about progressive enhancements. CSS box-shadows and border-radius properties are supported in almost all modern browsers. These days, there are very few compelling reasons to use images when you don't have to. A menu's primary purpose is to function well in all browsers. How it looks in x-browser is secondary.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
JQuery widgets, formally known as Spry assets - go away forever please
Is there no way to completely shut this off? I'm so tired of getting that warning when I try and save a site's configuration. 'Warning: The jQuery assets folder is not inside the site. Please select a valid folder in your local site root'. It prevents me from saving so I have to remove the site, edit the .ste file manually, then re-import it. This is quite a pain in the *** when you manage over 200 sites, of which non of them use jQuery widgets or Spry assets.
Maybe you are looking for
-
Help setting up an HP Laser printer to work via the USB
I Would like to use my airport extreme as my wifi connection for my HP CP-1025 laser printer. I've tried to get my MacBook Pro retina 13" to see the printer when it is plugged into the USB at the back of my AirPort Extreme ac but I'm unable to get it
-
This one is a doozy, mainly due to me explaining to set ups. Initially, I set up a wired network with a Wireless Router (WRT54G2) as the lead router. This is in a small office application style environment.5 wired pc's. We are using DSL (w/DSL modem)
-
Solution for ipod video. Worked for me
I have had similar problems as others on this forum. Plugged in my new ipod and it froze. Reset it, followed the 5 R's. Nothing seemed to work. Except that I only removed the itunes software not the ipod software. I uninstalled everything and reloade
-
Why does the spinning wheel come up every time I open an application
Every time I open an application, I get the "spinning wheel" for an extended period of time. This is a VERY FAST computer and this slows me down terribly. For instance: I just opened iTunes to sync my iPhone. When I opened the software I got the w
-
Single hot corner, multiple options?
Hi guys, I recently updated my iMac from app store's downloadable Mountain Lion (10.8.2). And I bought a Mac Pocket Book for learning about this new OS. Here's the thing confused me a lot. The author said these: Use the drop-down menus to set options