I'm new to coding, but made this site a few years ago and it stopped working a month ago. No changes were made. Please help. I tested the site by putting everything in DW and it worked. So I am not sure why on the web it wont replicate.
I did try all browsers and java is enabled. This is supposed to be a rotating picture wheel from coding jack. Like I said before it did work for the past 3 years. It stopped working a month or so ago.
I have been trying everything on my end to figure it out, but I am at a loss. Any help will be appreciated, but please understand I am not an expert. I did my research and will respond to you once I have tried everything you guide me with.
Thank you!
results on webpage
<div class="zoom-gallery" id="zoom-instance-1">
<img src="images/showcase/assets/preloader.gif" class="preloader" width="55" height="18" alt="preloader" />
<ul>
<li title="images/showcase/pastor1.jpg">
<!-- "class" options are "align-left" and "align-right", these are the text-align options -->
<!-- "title" attribute is optional. If added it will link the entire slide to the url entered -->
<ul class="align-left" title="http://codecanyon.net/user/CodingJack">
</ul>
</li>
<li title="images/showcase/child.jpg">
<ul class="align-left">
</ul>
</li>
<li title="images/showcase/prayer.jpg">
<ul class="align-left">
</ul>
<li title="images/showcase/praise.jpg">
<ul class="align-left">
</ul>
<ul class="align-left">
</ul>
</li>
</ul>
<noscript>
<div id="noscript"><img src="images/showcase/pastor1.jpg" alt="jQuery Banner Rotator" width="400" height="262" align="middle" />
</div>
</noscript>
</div>
Related
I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
Okay so i have been looking at this for over a week and can not figure it out. Basically here is an example of the end result i posted earlier:
Previous Stack Overflow Post
Their suggestions did not work. The javascript is changing the header css when you click on the buttons to the top right. Here is a Demo: DEMO of JAVASCRIPT CHANGE
I'm Trying to duplicate this action with the image, but i however do not know javascript that well and am not too sure what i am reading when i look at the javascript file. I either would like someone to help me read this javascript so i can edit it myself or help me find a solution.
Here is the Javascript: Script.JS
Here is the relevant HTML that i have done so far:
body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
<div class="inner">
<h5><img src="images/logo_large.png" /></h5>
<!--<img src="logo-large.png" id="img- logo" alt="" />
<!--</>-->
<nav>
<ul>
<li class="li-2"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>History</li>
<li>Mission Statement</li>
<li>Solutions</li>
<li>Distribution Area</li>
<li>SAS Logo</li>
</ul>
</li>
<li class="li-1"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>Trade Show</li>
<li>Awesome Achievers</li>
<li>What's Happening</li>
</ul></li>
<li class="li-3"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>NexGen</li>
<li>Synergy</li>
<li>EDI</li>
</ul>
</li>
<li class="li-4"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-5"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-6"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
</ul>
</nav>
</div>
</header>
And here is the CSS: Style.css
ANY help would be greatly appreciated and will get "points" for it, i have been working on this for over a week with no help, but i have decided i should reach out for help.
THANKS!
Not a Javascript solution, but I managed to achieve what you want using CSS; just add 'height: 40%' to your logo image and it should scale with the header (note that you'll probably need to use a higher-quality version of the logo), as the current one gets a bit pixellated when it grows.
I'm trying to implement an Orbit slider into my page. This works fine with just images and regular bullets, but when I add deeplinks to this, the # href of each deeplink is triggered and i'm sent back to the top of the page. I don't even know if the data-orbit-link is working or not.
<div class="row">
<ul id="featuredCom" data-orbit>
<li data-orbit-slide="image-1">
<img src="images/featureimages/slide2.jpg" />
</li>
<li data-orbit-slide="image-2">
<img src="images/featureimages/slide1.jpg" />
</li>
<li data-orbit-slide="image-3">
<img src="images/featureimages/slide3.jpg" />
</li>
</ul>
</div>
<div class="row">
<ul class="inline-list">
<li>Image One</li>
<li>Image Two</li>
<li>Goto Three 3</li>
</ul>
</div>
<script>
$(window).load(function(){
$('#featuredCom').orbit({
});
});
</script>
I haven't altered anything in the orbit.js file so I can't see what would be causing this. Read the Foundation 4 orbit docs back and forth to see if i'm missing anything, but even when copy their code, the deeplinks behave the same way. Any help would be appreciated!
You can use javascript: void(0);
Image One
And use
$(document).foundation();