Soundcloud Minimal Page Oversize - javascript

i'm currently in middle of developing a mobile app/site and i'm using the jquery mobile framework and also the SC Minimal custom player found here:
https://github.com/soundcloud/soundcloud-custom-player/blob/master/examples/sc-player-minimal.html
The custom player plays fine, that's not the issue, the issue i'm seem to be getting is that the page it is on seems to change the main body into some sort of iframe with a added scroller on the right side of the screen. This is a example page
http://www.blackburnravers.com/test/media/blackburnravers/blackburnravers_hypedup.html
I also have the latest jquery installed on my server, i just can't seem to find anything conflicting anywhere
Here's the code i'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blackburn Ravers - Hyped Up Mix</title>
<link rel="stylesheet" href="../../css/themes/blackburnravers.mob-3.0.0.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="../../_assets/css/jqm-brctemplates.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="../../js/jquery.js"></script>
<script src="../../_assets/js/index.js"></script>
<script src="../../js/jquery.mobile-1.3.2.min.js"></script>
<script src="https://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script type="text/javascript" src="../../js/soundcloud.player.api.js"></script>
<script type="text/javascript" src="../../js/sc-player.js"></script>
<link rel="stylesheet" href="../../css/sc-player-minimal.css" type="text/css" />
</head>
<body>
<div data-role="page" class="jqm-brctemplates" data-quicklinks="true">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></h1>
<div data-role="popup" id="wedowhatwewant" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
<div data-role="content" data-theme="f">
<center>
WE DO WHAT WE WANT!
</center>
</div>
</div>
Navigation
Search
<div class="jqm-search">
<ul class="jqm-list">
</ul>
</div>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Hyped Up Mix</h1>
<p>
Re-recording of our set from Hyped up from Friday 14/06/2013.<br />
Fantastic night and superb bunch down there.
<p>
Hyped Up Mix
</p>
<br />
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h4>Tracklist</h4>
<ol data-role="listview">
<li>Scott Brown - All About Elysium (Al Storm Remix)</li>
<li>Darren Styles & Squad-E - Party People</li>
<li>Asa & S1 Feat. Lou Lou - Makin� Me Wanna Dance (Sy & Unknown Remix)</li>
<li>Ben Xtreme & Mc Ortie - Looking Down (Dj Kurt Remix)</li>
<li>Darren Styles - Take Me Away</li>
<li>Darren Styles - Save Me (Re-Con Remix)</li>
<li>Dougal & Gammer Feat. Lisa Abott - Something Good</li>
<li>Gusto - Discos Revenge (Breeze's Filthy Hardcore Mix)</li>
<li>Joey Riot & Chaos - I Wanna Freak U Bby</li>
<li>Paradise - Angel (Sy & Unknown Remix)</li>
<li>Re-Con Feat. Sophie may - Dont hold calling back (Azzyd Vox Booty)</li>
<li>Anon - How Low (Naughty is Nice Remix)</li>
<li>Scott Brown - Rock You Softly (UFO & Supreme Remix)</li>
<li>Dj Kurt - Right About Now</li>
<li>Starkillers - Discoteka (Dougal & Gammer Remix)</li>
</ol>
</div>
<br />
<div class="ui-grid-a">
<div class="ui-block-a">
<center><img width="150px" src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix"></center>
<div data-role="popup" id="screenshot" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
Close<img src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix">
</div>
</div>
<div class="ui-block-b">
<center><img width="150px" src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix"></center>
<div data-role="popup" id="screenshot2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
Close<img src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix">
</div>
</div>
</div><!-- /grid-b -->
<br />
<div class="ui-grid-a">
<div class="ui-block-a">SoundCloud</div>
<div class="ui-block-b">Share</div>
</div><!-- /grid-b -->
</p>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p><span class="copyright">©</span> 2013 The Blackburn Ravers -
DJ NJ & Dj Upalnite
<div data-role="popup" id="aboutapp" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
<div data-role="content" data-theme="f">
<center><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></center>
<br />
App Version - <i>v3.0.0</i><br />
App Creator - <i>Dj Upalnite</i><br />
Bugs - <i>Please email us</i><br />
Website - <i>www.blackburnravers.com</i><br /><br />
</div>
</div>
</p>
</div><!-- /footer -->
<!-- Here are a bunch of panels at the end, just before the close page tag -->
<!-- main navigation panel -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">
<li data-role="list-divider">Main Links</li>
<li data-filtertext="Home" data-ajax="false">Home</li>
<li data-filtertext="Media" data-ajax="false">Mixes</li>
<li data-filtertext="ajax navigation navigate event method">Social Sites</li>
<li data-filtertext="ajax navigation navigate event method"><a data-ajax="false" href="../../events/">Events</a></li>
<li data-filtertext="ajax navigation navigate event method">Contact Us</li>
<li data-filtertext="ajax navigation navigate event method">Main Website</li>
<li data-role="list-divider">Mix Section</li>
<li data-filtertext="ajax navigation navigate event method">Blackburn Ravers</li>
<li data-filtertext="ajax navigation navigate event method">Dj Upalnite</li>
<li data-filtertext="ajax navigation navigate event method">DJ NJ</li>
<li data-filtertext="ajax navigation navigate event method">Mad For It</li>
</ul>
</div>
<!-- /main navigation panel -->
<div data-role="panel" id="share-panel" data-display="reveal" data-position="right" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">
<li data-role="list-divider">Share this page</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Google +</li>
<li>Email</li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
</body>
</html>
is there something i could have missed? hope somebody can help me,
thanks,
Blackburn Ravers.

I was looking at it and then refreshed the page and it seems that the code changed so I am figuring that you are playing with it. I'm not sure but before the change, I believe that it seemed like .sc.scrubber div was the issue. Try using max-width: 100% (or 95% I believe was in there) instead of just width: 100%.

Fixed it. For some reason there was 2 'content' classes that where clashing and causing it to over scale and resize the page. I removed it from my code and it is working perfect.
thank you for your time looking at it for me. Cheers.
Blackburn Ravers.

Related

Creating a modal with JavaScript or Jquery

I have created a link that I want a modal to pop up when I click on it of a different HTML page is there a way to do so using either JavaScript or Jquery. It is pretty much a resume card that opens a modal of my resume.html page. I have posted the resume card and the resuume.html code below. Is there a way to create a modal from a different page or at least its main tag because that is all I need really.
<a href="">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button>See More</button>
</div>
</div>
</div>
</a>
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="personal.css">
<title>Resume</title>
</head>
<body class="resume">
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</body>
</html>
You can do like this as in below snippet . And can decorate resume according to need .
function showResume(){
document.getElementById("resume").style.display = "block";
}
function closeResume(){
document.getElementById("resume").style.display = "none";
}
#resume {
display: none;
border:2px solid red;
position:absolute;
top:0;
background-color:white
}
.close{
position:absolute;
right:0;
padding: 8px;
background-color:red;
color:white;
cursor:pointer;
}
<a href="#">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button onclick="showResume()">See More</button>
</div>
</div>
</div>
</a>
<div id="resume">
<span class="close" onclick="closeResume()">Close</span>
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play
video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</div>
You can now share your website link and it will first show the card then your resume . You can also hide/show card like adding this to the JS function :
document.getElementsByClassName("card").style.display = "none/block";
respectively

Why does it jump to my else statement immediately?

Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/Logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.

uncaught type error object has no method 'to top scroller'

i got the plugin from this link http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i attcahed the code below of my index.html.i tried many jquery plugin but it did n't work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Pharmaceutical</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favi.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- header -->
<header id="header">
<h1 id="logo">Retina</h1>
<!-- search -->
<div class="search">
<form action="" method="post">
<input type="text" class="field" value="keywords here ..." title="keywords here ..." />
<input type="submit" class="search-btn" value="" />
<div class="cl"> </div>
</form>
</div>
<!-- end of search -->
<div class="cl"> </div>
</header>
<!-- end of header -->
<!-- navigaation -->
<div id="menu">
<ul class="menu">
<li><span>Home</span>
<div><ul>
<li><span>About us</span></li>
<li><span>History</span>
<div><ul>
<li><span>Medicine</span>
<div><ul>
<li><span>Generic</span></li>
<li><span>Branded</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Doctors</span></li>
<li><span>pharmaceutical establishment</span></li>
<li><span>Contact us</span></li>
</ul></div>
</li>
<li><span>Doctors zone</span>
<div><ul>
<li><span>Search Doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>Doctors visits</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By state</span></li>
</ul></div>
</li>
<li><span>Doctors Reaserch</span></li>
<li><span>Doctors specialization</span></li>
</ul></div>
</li>
<li><span>Pharmaceutical zone</span>
<div><ul>
<li><span>Search Pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Door delivery</span></li>
</ul></div>
</li>
<li><span>Offer zone</span>
<div><ul>
<li><span>Medicine offer</span></li>
<li><span>Cosmetics offer</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Ask questions</span>
<div><ul>
<li><span>To doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>To pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Get a contact details</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li class="last"><span>Online Appointment Fixing</span></li>
<li class="last"><span>Gallery</span></li>
<li class="last"><span>Donate</span></li>
<li class="last"><img src="css/images/ini.png" alt="" /></li>
</ul>
</div>
<!-- end of navigation -->
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
facebook-ico
twitter-ico
skype-ico
rss-ico
<div class="cl"> </div>
</div>
<div class="arrs">
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>MEDICAL CHECKUP</h4>
<h2>Free medical test..let's go</h2>
<p>Free CMR scan,full body scan,pressure,sugar checkup is in progress! Read more</p>
</div>
<img src="css/images/cli7.png" alt="" />
</li>
<li id="img2">
<div class="slide-cnt">
<h4>CLINICAL SHOPPING</h4>
<h2>Get near by clinical and testing shop!</h2>
<p>Find a near by clinical shop and blood testing centres! Read more</p>
</div>
<img src="css/images/cli5.png" alt="" />
</li>
<li id="img3">
<div class="slide-cnt">
<h4>DOCTORS AND MEDICAL S sHOOPING</h4>
<h2>Let check out the medicine</h2>
<p>find a nearby medical shop and Doctors..let's acquire a offer!Read more</p>
</div>
<img src="css/images/cli1.png" alt="" />
</li>
<li id="img4">
<div class="slide-cnt">
<h4>EXPLORE YOUR IDEAS AND CHECK MEDICAL STRATEGY</h4>
<h2>upload your nearby details</h2>
<p>let help others to know about all the stuff about pharmaceutical details!Read more</p>
</div>
<img src="css/images/mac-img.png" alt="" />
</ul>
</div>
<!-- end of slider -->
<!-- thumbs -->
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="css/images/cli7.png" />
<img src="css/images/cli5.png" />
<img src="css/images/cli1.png" />
<img src="css/images/mac-img.png" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
<!-- end of thumbs -->
</div>
<!-- main -->
<div class="main">
<div class="featured">
<h4>Welcome to <strong>Pharmaceutical Datawarehouse.</strong> Login to know all the stuff about Doctors and Medicines <strong>FREE!</strong>Explore and acquire the Life things</h4>
GET IN TOUCH
</div>
<section class="cols">
<div class="col">
<h3>Daily Health Tips</h3>
<img src="css/images/fruit.png" alt="" class="left"/>
<h5>Make your day healthy and hygienic</h5>
<p>All foods made from meat, poultry, seafood, beans and peas, eggs, processed soy products, nuts, and seeds are considered part of the Protein Foods Group. Beans and peas are also part of the Vegetable Group. For more information on beans and peas, see Beans and Peas Are Unique Foods. <br />Read more</p>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/hiring.png" alt="" class="left"/>
<h5>We are looking people for doing health services </h5>
<div class="cl"> </div>
<p>Make our country disease free!let's join your hand with us to serve for the humanity!Just login to register your valuable service <br />Click here to LOGIN</p>
</div>
<div class="col">
<h3>Our Services</h3>
<ul>
<li>Get a Doctor details near by your area</li>
<li>Grab the Hospitals details near by your area </li></br></br>
<video width="250" height="240" controls>
<source src="hygiene.mp4" type="video/mp4">
<source src="hygiene.ogg" type="video/ogg">
<source src="hygiene.webm" type="video/webm">
<object data="hygiene.mp4" width="250" height="240">
<embed src="hygiene.mp4" width="250" height="240">
</object>
</video>
</ul>
</div>
<div class="cl"> </div>
</section>
<section class="entries">
<div class="entry">
<h3>Latest Blog Posts</h3>
<div class="entry-inner">
<div class="date">
<strong>01</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>pharmaceutical<br /> Reaserch</p>
<p class="meta">by John Doe / Cipla pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>28</strong>
<span>2012</span>
<em>jan</em>
</div>
<div class="cnt">
<p>Research in thyroid<br /> bones</p>
<p class="meta">by shaullah / Sun pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>11</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>Medical awareness<br /> Camp</p>
<p class="meta">by indian government / Awareness camp</p>
</div>
</div>
</div>
<div class="entry">
<h3>Latest Project</h3>
<h5>Recent summer projects completed by MSc Medical Microbiology students </h5>
<img src="css/images/pro.png" a alt="" />
<p> Analysis of Human Antibody Responses to a Novel Polymorphic Plasmodium falciparum Merozoite Protein from the Antigenic Rich Region of Chromosome <br />view more</p>
</div>
<div class="entry">
<h3>Testimonials</h3>
<div class="testimonials">
<p><strong>“</strong>Pharmaceutical Datawarehouse really doing well and the serving for the humanity to be healthy and hygienic”</p>
<p class="author">John Doe, <strong>Cipla Pharma</strong></p>
</div>
<div class="partners">
<h3>Our Partners</h3>
<img src="css/images/partners-img.png" alt="" />
</div>
</div>
<div class="cl"> </div>
</section>
</div>
<!-- end of main -->
<div class="cl"> </div>
<!-- footer -->
<div id="footer">
<div class="footer-nav">
<ul>
<li>Home</li>
<li>Doctors zone</li>
<li>Pharamaceutical Zone</li>
<li>Ask aQuestion </li>
<li>Get a free health tips</li>
<li>Gallery</li>
<li>Donate us</li>
</ul>
<div class="cl"> </div>
</div>
<p class="copy">© Copyright 2012<span>|</span>Sitename. Design by Nawaz</p>
<div class="cl"> </div>
</div>
<!-- end of footer -->
</div>
<!-- end of container -->
</div>
<!-- end of shell -->
</div>
<!-- end of wrapper -->
<div id="totopscroller"> </div>
<script>
$(function(){
$('#totopscroller').totopscroller({link:'http://www.jqueryscript.net'});
})
</script>
</body>
</html>
This error is about that plugin is not inited. You init plugin before jQuery:
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
Change to this:
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>

jQuery Mobile - Panel Issue - Not opening on second click

I have a working left panel in my App that I have began to build, however when I try and go back to my main screen the panel no longer works. To see this bug, use the following method:
1) Click on 'Bars' Icon top left and go to Google Maps
2) Once on the blank page, use the panel to go back to Home page.
3) Try and open panel once more.
JSFiddle Link
Any ideas?
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"> -->
<!-- <script src="jquery-2.0.3.min.js"></script> -->
<!-- <script src="jquery.mobile-1.4.0.min.js"></script> -->
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="home">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
</div>
<!-- Content -->
<div role="main" class="ui-content">
<div>
<img src="" id="picture">
</div>
</div>
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
</div>
<!-- Maps Page -->
<!-- Start of second page -->
<div data-role="page" id="two">
<!-- Left-Panel -->
<div data-role="panel" id="left-panel" data-display="overlay"> Home
About Us
News
Key Dates
Calendar
Contact
Links
Google Map
Videos
Gallery
</div>
<!-- Header -->
<div data-role="header" data-position="fixed" data-theme="a">
<!-- Header -->
<h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars">
</div>
<div role="main" class="ui-content">
</div><!-- /content -->
<!-- Footer -->
<div data-role="footer" data-position="fixed" data-theme="a">
<h4>Footer</h4>
</div>
Fixed, here is the fiddle:
http://jsfiddle.net/tHDWJ/1/
Problem was that you were referencing the same panel in both pages and when you navigate the current page hides the previous panel.
Note the difference in the following lines:
<div data-role="panel" id="left-panel1" data-display="overlay">
<div data-role="panel" id="left-panel2" data-display="overlay">

Why isn't Foundation 4 Orbit working for me?

I'm not sure as to why my implementation is not working. I have followed the documentation on the foundation 4 site but can not figure out why it's not working. All that shows up are the cursor dots that change the position of the pictures in the Orbit. Also, I have the correct css/html/js folder paths.
Here's what my mark up looks like:
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<nav class="top-bar">
<ul class="left">
<li class="name"><font color="white">Va</font></li>
</ul>
<ul class="right">
<li class="name"><font color="white">Home</font></li>
</ul>
</nav>
<br>
<!-- ======================== ORBIT===================== -->
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
<!-- Prev/Next Arrows -->
Prev<span></span>
Next<span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
</div>
</div>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<!-- =======ORBIT END======= -->
<script>
document.write('<script src=foundation-4/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'foundation-4/js/vendor/zepto' : 'foundation-4/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Also, here is a screen shot of the errors I am getting in google chrome.
http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html
EDIT: THE FOUNDATION DOUMENTATION CONTAINS
<ul data-orbit="" class="orbit-slides-container">
REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:
<ul data-orbit>
"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here http://jquery.com/download/
Link this jQuery file to your website
Even if the jQuery file is linked properly make sure it is loaded in the
<head></head> tags before loading the foundation javascript files
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="LINKTO JQUERY JS FILE"></script>
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
EDIT:
<div class="row">
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
</div>
</div>
EDIT: TRY THIS
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit>
<li data-orbit-slide="headline-1">
<h2>Headline 1</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
<li data-orbit-slide="headline-2">
<h2>Headline 2</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
</ul>
</div>
</div>
It's not going to work because there are AJAX calls being made to get the scripts. You're going to have to use something like USBWebServer if you're going to develop/test locally.

Categories