I'm developing a full-screen web app for an iPad that will have a series of images on screen in a slider whereby the user will be able to scroll between them and then click on one.
Here is an example image of how it would look:
There are plenty of jQuery-based sliders out-there but all require the use of a user clicking some form of button. What I want to do is replicate it so that the user would swipe the screen to move between the different images.
Here is some example markup:
<ul id="magazine-slider">
<li>
<div class="image">
<img src="magazine-cover-jan.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>January 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
<li>
<div class="image">
<img src="magazine-cover-feb.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>February 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
<li>
<div class="image">
<img src="magazine-cover-mar.png" width="640" height="640" />
</div>
<div class="meta">
<h3>Magazine Title</h3>
<h4>March 2010</h4>
</div>
<ul class="options">
<li><a title="Delete" href="#">Delete</a></li>
<li><a title="View" href="#">View</a></li>
</ul>
</li>
</ul>
<ul id="magazine-slider-pagination">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Can anyone help? Thanks
You have to intercept touchStart/Move/End events
( http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html )...
take a look here:
http://padilicious.com/code/touchevents/
and here for a pre-built component:
iPhone / iPad / iPod swipe events javascript
You will probably need a touch-based mobile framework to handle the touches/swipe.
One that comes to mind is Sencha.com
Related
I am new to Selenium and trying to build a project with it. I need to learn how to click a JS link. There are many items listed by pages. Pagination is done by JS, unfortunately. here is an example...
<ul class="pagination museo-700">
<li class="first hidden disabled">
First
</li>
<li class="prev disabled">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-prev-arrow.png">
</a>
</li>
<li class="page active">
1
</li>
<li class="page">
2
</li>
<li class="page">
3
</li>
<li class="page">
4
</li>
<li class="page">
5
</li>
<li class="next">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-next-arrow.png">
</a>
</li>
<li class="last hidden">
Last
</li>
</ul>
I would like to click pages 1., 2., 3. ,4. and 5. pages above. Please give me a clue
You could first locate the pager with a CSS selector and then each link by link text:
driver.FindElement(By.CssSelector("ul.pagination"))
.FindElement(By.LinkText("1")).Click();
You could also use an XPath:
driver.FindElement(By.XPath("//a[#href='#'][text()='1']")).Click();
code not tested but I feel like they should work
.page > a:contains("1")
.page > a:contains("2")
.page > a:contains("3")
.page > a:contains("4")
.page > a:contains("5")
or
//li[contains(#class, 'page')]/a[text()='1']
I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.
Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}
I am using Codiqa, a mobile prototyping tool, which creates div id layers with iframes inside them, and the menu links just go to that DIV id without any real page loading; so when the main Apps menu is initially loaded, all divs and their respective iframes load simultaneously, and then everything is navigable via div ids for page linking. The issue here is that I am dealing with content that could have been updated while navigating the menu, so if the content changes and you click on a menu item then the iframe doesn't refresh and load any new or updated content; I need to manually refresh my browser every time to see changes! How can I fix this? I was thinking of putting a javascript function on the menu link itself, but not sure how to go about that. Thanks in advance!
HTML
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">Apps</li>
<li data-theme="">
<a href="#page16" data-transition="flip">
Central Office Survey
</a>
</li>
<!-- <li data-theme="">
<a href="#page18" data-transition="flip">
Manhole
</a>
</li>-->
<li data-theme="">
<a href="#page21" data-transition="flip">
Prepping A
</a>
<!-- </li>
<li data-theme="c">
<a href="#page19" data-transition="flip">
Prepping A
</a>
-->
</li>
<li data-theme="c">
<a href="#page20" data-transition="flip">
Prepping Z
</a>
</li>
<li data-theme="c">
<a href="#page17" data-transition="flip">
Extracting
</a>
</li>
<li data-theme="c">
<a href="#page15" data-transition="flip">
Warehouse
</a>
</li>
<li class="sample">
<a href="#page22" data-transition="flip">
Sample
</a>
</li>
</ul>
<!-- Extracting -->
<div data-role="page" id="page17">
<div data-theme="a" data-role="header" id="frame_header">
Return To Main Menu
<h3>Extracting</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/extraction/" id="Cable_Extraction_Worksheet"
name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/extraction/" target="Cable_Extraction_Worksheet" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.location.reload();" data-transition="none" data-theme="" data-icon="minus">
Reset
</a>
</li>
<li>
<a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();" data-transition="none" data-theme="" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="page22">
<div data-theme="" data-role="header" id="frame_header">
Return To Main Menu
<h3>Sample</h3>
</div>
<div data-role="content">
<iframe src="http://gp21.idmyasset.com/mobile/sample/" name="sample" id="sample" class="contentiframe"></iframe>
<script type="text/javascript">
document.frames['sample'].location.reload(true);
</script>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a onclick="document.getElementById('sample').contentWindow.location.reload();" data-transition="none" data-icon="minus">
Reset
</a>
</li>
<li>
<!--Use Submit Validation Function for iFrame Form-->
<a onclick="sample.submitForm();" data-transition="flip" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
Cool you used Codiqa, I made it :)
You can do what you are requesting by listening for the pageshow event on that page and triggering the refresh:
$('#page22').on('pageshow', function() {
$('#sample').attr("src", $('#sample').attr("src"));
});
We recently added support to change the page id, so you can customize it now.
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
None of my content appears to be showing in a web browser. I created the website in Wordpress
I am not sure whether I am missing some vital code but it seems to display the logo and the 'Services' bar but otherwise my page appears to be empty
header.php:
</head>
<body class="">
<div id="wrapper">
<div id="jump">
<p>jump to content</p>
</div>
<div class="hud-content">
<div id="content-container">
<div id="header">
<div id="logo">
<a href="/" title="Wild Lion Media">
<img src="/wildlion/wp-content/themes/child/images/logo.png" width="95" height="120" alt="Wild Lion Media" title="Wild Lion Media" />
</a>
</div>
<h1>
Wild Lion Media
</h1>
<div id="hud-toggler">
<ul>
<li>Login / Register</li>
</ul>
</div>
</div><div id="nav">
<ul>
<li id="nav-home">Home</li>
<li id="nav-dandad"><a class="nav-item" href="/dandad" title="Wild Lion Media">Wild Lion Media</a>
<div class="subnav">
<ul class="subnav">
<li>About</li>
<li>Events</li>
<li>Join</li>
<li>Latest</li>
<li>Partnerships</li>
<li>White Pencil</li>
<li class="feature">
<p class="intro">Get your voice heard</p>
<p>Wild Lion Media Membership: It’s classy, exclusive, well connected – everything you could ask for from a private member’s club. Ok, we don’t have a pool on the roof, but just wait till you see the size of our archive.</p>
<p class="readmore">Read More</p>
<img src="#" width="167" height="167" alt="Nav Yellow Pencil" class="feature-pic"/>
<ul class="feature-links">
<li><a href="/dandad/join/individual-membership" title="Individual Membership">Individual<br />
Membership</a></li>
<li><a href="/dandad/join/d-ad-education-network" title="Education Network">Education<br />
Network</a></li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-inspire"><a class="nav-item" href="/inspiration" title="Inspiration">Inspiration</a>
<div class="subnav">
<ul class="subnav">
<li>Inspired by…</li>
<li>Watch & Listen</li>
<li>Have Your Say</li>
<li>Features & Opinion</li>
<li>Profiles</li>
<li>Archives & Collections</li>
<li class="feature">
<p class="intro">Wild Lion Media<br/>President’s Lectures</p>
<p>Chosen by the President of Wild Lion Media speakers represent the best in their creative fields and inspire discussion and debate.<br/></p>
<p class="readmore">Book your tickets</p>
<img src="#" width="167" height="167" alt="President’s Lectures" class="feature-pic"/>
</li>
</ul>
</div> </li>
<li id="nav-awards"><a class="nav-item" href="/awards" title="Awards">Awards</a>
<div class="subnav">
<ul class="subnav award-sections">
<li>
<p class="intro">Professional Awards</p>
<p>Yellow Pencils are recognised the world over as a symbol of true creative achievement. Year on year the Wild Lion Media Annual showcases the very best work and continues to provide an unrivalled source of creative inspiration.</p>
<ul>
<li>Professional</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
<li>
<p class="intro">Student Awards</p>
<p>Creatives the world over value the Wild Lion Media Student Awards above any other. Winning a Wild Lion Media Student Award truly marks you out as one of the best. Take your first step in becoming a creative superstar.</p>
<ul>
<li>Student</li>
<li class="new">2012</li>
<li>2011</li>
<li>2010</li>
<li>Archive</li>
</ul>
</li>
</ul>
</div> </li>
<li id="nav-talent"><a class="nav-item" href="/talent" title="Talent">Talent</a>
<div class="subnav">
<ul class="subnav">
<li>Spotlights</li>
<li>Portfolios</li>
<li>New Blood</li>
<!-- <li>Graduate Placement Scheme</li>-->
<li>Graduate Academy</li>
<!-- <li>Jobs</li>-->
<li class="feature">
<img src="#" alt="Graduate Academy - Where the creatively brave shine" class="fullpic" />
</li>
</ul>
</div>
</li>
<li id="nav-learning"><a class="nav-item" href="/learning" title="Learning">Learning</a>
<div class="subnav">
<ul class="subnav">
<li>Case Studies</li>
<li>Commentary</li>
<li>Guides</li>
<li>Talks</li>
<li class="new">Projects</li>
<li>Workshops</li>
<li>Professional Development</li>
<li class="feature">
<img src="#" alt="Education Network Membership. One yellow pencil. Lots of benefits." class="fullpic" />
</li>
</ul>
</div> </li>
<li id="nav-search">
<form action="/search" method="get" accept-charset="utf-8">
<p><label for="search">Search</label><input type="text" name="q" value="Search" id="search" class="tfield" tabindex="5" /></p>
<p><input type="submit" id="search_submit" value="Go" tabindex="6" /></p>
</form>
</li>
</ul>
</div> <div id="content">
<div class="panel-10">
<p class="widget-title">Services</p>
<ul class="powerlinks pl-feature extended">
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/video_production.jpg" width="176" height="104" alt="Video Production" title="" />
<p>
<a href="#">
<span>
<strong>Video Production</strong>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Every element of your production can be designed to meet your needs.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/talking_heads.jpg" width="176" height="104" alt="Talking Heads" title="" />
<p>
<a href="#">
<span>
<strong>Talking Heads</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
A simple but effective way of communicating a message and introducing key players.
</span>
</a>
</p>
</li>
<li>
<img src="/wildlion/wp-content/themes/child/images/motion_graphics.jpg" width="176" height="104" alt="Motion Graphics" title="" />
<p>
<a href="#">
<span>
<strong>Motion Graphics</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Whether 2D logo design or 3D animation and visual effects, anything is possible.
</span>
</a>
</p>
</li>
<li class="last">
<img src="/wildlion/wp-content/themes/child/images/web_videos.jpg" width="176" height="104" alt="Web Videos" title="" />
<p>
<a href="#">
<span>
<strong>Web Videos</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
From social networks to blogs and news feeds, get your viral out there.
</span>
</a>
</p>
</li>
<li class="first">
<img src="/wildlion/wp-content/themes/child/images/live_events.jpg" width="176" height="104" alt="Live Events" title="" />
<p>
<a href="#">
<span>
<strong>Live Events</strong><br/>
</span>
</a>
</p>
<p class="extended">
<a href="#">
<span>
Why limit your audience to the venue capacity? Capture your event in style.
</span>
</a>
</p>
</li>
</ul>
</div>
<div class="panel-10">
<div class="panel-8 alpha">
<div class="panel-2 alpha">
</div>
</div>
</div>
<div class="panel-10" id="footer">
<div class="panel-2">
<p>© 2012 Wild Lion Media Limited </p>
</div>
<div class="panel-2" id="back-to-top">
<p>Back to the top</p>
</div>
</div>
<div class="clearing"></div>
</div>
</div>
<div class="overlay"></div>
On line 5 of your stylesheet you have:
#nav,
#hud,
#hud-toggler,
#imagebar,
#jump,
div #breadcrumb,
#quick-jump,
#sitemap,
#external-links,
#back-to-top,
ul.powerlinks,
ul.article-nav,
#sidenav ul,
p.return,
a.doc-pdf,
a.doc-word,
div.logo a {
display: none;
}
This is causing everything to be hidden. Remove that line and you'll see your content.
In your style.css (line 5) you have a rule:
#nav, #hud, #hud-toggler, #imagebar, #jump, div #breadcrumb, #quick-jump, #sitemap, #external-links, #back-to-top, ul.powerlinks, ul.article-nav, #sidenav ul, p.return, a.doc-pdf, a.doc-word, div.logo a {
display: none;
}
It hides all your content.