Creating a modal with JavaScript or Jquery - javascript

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

Related

EventListener not always being loaded

I have three 'click' event listeners coded in my javascript. The first two always work (for the elements with id's cs-detail-toggle and tc-detail-toggle) but the last one (for the element with id cc-detail-toggle) only works sometimes.
Sometimes when I load the site in my browser I can see the event listener in dev tools, other times it is not there.
The purpose of all three event listeners is the same - change the CSS display property of respective div's between 'none' and 'block'.
/** CSS Cheat Sheet Detail Toggle */
const csToggle = document.getElementById('cs-detail-toggle')
const csDetail = document.getElementById('cs-details')
function toggleCsDisplay() {
if (csDetail.style.display === 'none') {
csDetail.style.display = 'block'
} else {
csDetail.style.display = 'none'
}
}
csToggle.addEventListener('click', toggleCsDisplay);
/** Tea Cozy Detail Toggle **/
const tcToggle = document.getElementById('tc-detail-toggle')
const tcDetail = document.getElementById('tc-details')
function toggleTcDisplay() {
if (tcDetail.style.display === 'none') {
tcDetail.style.display = 'block'
} else {
tcDetail.style.display = 'none'
}
}
tcToggle.addEventListener('click', toggleTcDisplay);
/** Credit Card Checker Detail Toggle **/
const ccToggle = document.getElementById('cc-detail-toggle')
const ccDetail = document.getElementById('cc-details')
function toggleCcDisplay() {
if (ccDetail.style.display === 'none') {
ccDetail.style.display = 'block'
} else {
ccDetail.style.display = 'none'
}
}
ccToggle.addEventListener('click', toggleCcDisplay);
<section class="projects">
<h2>Projects</h2>
<div class="projects-container">
<div class="project-card">
<h3>CSS Positioning Cheat Sheet</h3>
<img
src="./assets/css-cheat-sq.png"
alt="screenshot preview of css positioning cheat sheet project"
/>
<p id="cs-detail-toggle">+ Details and Links</p>
<div id="cs-details" class="details">
<p>Quick reference guide for the 5 main CSS positioning types</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML 5 and CSS3</p>
<a href="https://github.com/YSquid/positioning-cheat-sheet" target="_blank"><i class="fa-brands fa-github"></i
>GitHub Repository</a>
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
<div class="project-card">
<h3>Tea Cozy Landing Page</h3>
<img src="./assets/tea-cozy-sq.png" alt="screenshot preview of tea cozt landing page project">
<p id="tc-detail-toggle">+ Details and Links</p>
<div id="tc-details" class="details">
<p>Landing page for a ficitonal business</p>
<p>Created according to provided website spec</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML5 and CSS3</p>
<i class='fa-brands fa-github'></i>GitHub Repository
</div>
</div>
<div class="project-card">
<h3>Credit Card Number Validator</h3>
<img src="./assets/card-checker-sq.png" alt="image of credit card with number highlighted and first step of luhn alorithm shown">
<p id="cc-detail-toggle">+ Details and Links</p>
<div id="cc-details" class="details">
<p>Program for checking credit cards</p>
<p>Can accept array of credit card numbers, and find the invalid ones</p>
<p>Takes list of invalid cards, and prints array of the credit card companies whose cards are in the invalid array</p>
<p>Tech used - Javascript, NodeJS for testing</p>
<i class='fa-brands fa-github'></i>GitHub Repository
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
</div>
</section>
After some help debugging from the comments I was able to find a solution, posting for future reference.
As I had my script tag in the HTML head with the async attribute, the javascript file was loading before the DOM element existed.
Here was my script tag placement before.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" />
<script
src="https://kit.fontawesome.com/620d1d46ff.js"
crossorigin="anonymous"
></script>
<!--font awesome import-->
<!--SCRIPT PLACEMENT NOT WORKING -->
<script src="./index.js" async></script>
</head>
I moved my script tag to the bottom of my code just before the closing body tag, and it all works now.
Here is the working HTML (scroll the bottom to find the script tag, comment there to flag it).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" />
<script
src="https://kit.fontawesome.com/620d1d46ff.js"
crossorigin="anonymous"
></script>
<!--font awesome import-->
</head>
<body>
<nav>
<div class="nav-left">
<h1>Ahmad Kariem</h1>
<a href="https://github.com/YSquid" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="https://www.linkedin.com/in/ahmad-kariem/" target="_blank"
><i class="fa-brands fa-linkedin"></i
></a>
</div>
<div class="nav-right">
<ul>
<li>About</li>
<li>Education</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section class="about">
<h2 class="about-title">About Me</h2>
<div class="about-container">
<div class="about-text">
<p>
Hi! My name is Ahmad Kariem, and I am a full stack developer from
Saskatoon Sasktchewan.
</p>
<p>
My educational background is in biochemistry and business, and I
have worked in a number of roles in my career including
tech-sales, digitial marketing, and data analysis. In early 2022,
I began my journey to becoming a self-taught full-stack software
developer. I have been studying using tools such as Codecademy and
Freecodecamp to learn skills in HTML, CSS, Javascript, ReactJS and
more!
</p>
<p>
In my spare time I like to play video games, golf, watch football
and e-sports, run, and lift weights.
</p>
</div>
<img
src="./assets/portfoli site pic.jpg"
alt="A headshot of Ahmad in a suit"
/>
</div>
</section>
<section class="education">
<h2>Education</h2>
<div class="education-container">
<div class="edu-card">
<h3>B.Sc Biochemistry - 2015</h3>
<ul>
<li>Univeristy of Saskatchewan</li>
<li>Graduated with High Honors</li>
</ul>
</div>
<div class="edu-card">
<h3>Masters in Business Administration (MBA) - 2019</h3>
<ul>
<li>University of Saskatchewan</li>
<li>Graduated with Honors</li>
</ul>
</div>
<div class="edu-card">
<h3>Full-Stack Softwar Engineer - In Progress</h3>
<ul>
<li>Codecademy</li>
<li>Started September 2022</li>
</ul>
</div>
</div>
</section>
<section class="projects">
<h2>Projects</h2>
<div class="projects-container">
<div class="project-card">
<h3>CSS Positioning Cheat Sheet</h3>
<img
src="./assets/css-cheat-sq.png"
alt="screenshot preview of css positioning cheat sheet project"
/>
<button id="cs-detail-toggle">+ Details and Links</button>
<div id="cs-details" class="details">
<p>Quick reference guide for the 5 main CSS positioning types</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML 5 and CSS3</p>
<a href="https://github.com/YSquid/positioning-cheat-sheet" target="_blank"><i class="fa-brands fa-github"></i
>GitHub Repository</a>
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
<div class="project-card">
<h3>Tea Cozy Landing Page</h3>
<img src="./assets/tea-cozy-sq.png" alt="screenshot preview of tea cozt landing page project">
<button id="tc-detail-toggle">+ Details and Links</button>
<div id="tc-details" class="details">
<p>Landing page for a ficitonal business</p>
<p>Created according to provided website spec</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML5 and CSS3</p>
<i class='fa-brands fa-github'></i>GitHub Repository
</div>
</div>
<div class="project-card">
<h3>Credit Card Number Validator</h3>
<img src="./assets/card-checker-sq.png" alt="image of credit card with number highlighted and first step of luhn alorithm shown">
<button id="cc-detail-toggle">+ Details and Links</button>
<div id="cc-details" class="details">
<p>Program for checking credit cards</p>
<p>Can accept array of credit card numbers, and find the invalid ones</p>
<p>Takes list of invalid cards, and prints array of the credit card companies whose cards are in the invalid array</p>
<p>Tech used - Javascript, NodeJS for testing</p>
<i class='fa-brands fa-github'></i>GitHub Repository
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
</div>
</section>
<section class="skills">
<h2>Skills</h2>
<div class="skills-container">
<i class="fa-brands fa-html5"></i>
<i class="fa-brands fa-css3-alt"></i>
<i class="fa-brands fa-square-js"></i>
<i class="fa-brands fa-react"></i>
<i class="fa-brands fa-node"></i>
<i class="fa-brands fa-npm"></i>
<i class="fa-brands fa-git"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-chrome"></i>
<i class="fa-solid fa-terminal"></i>
</div>
</section>
<section class="contact">
<h2>Please feel free to reach out and connect!</h2>
<div class="contact-container">
<i class="fa-solid fa-envelope"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-github"></i>
</div>
</section>
</main>
<!--SCRIPT PLACEMENT WORKING -->
<script src="./index.js" async></script>
</body>
</html>
Thanks to the commenters for putting me on the path to finding the solution!

Bootstrap javascript not working with locally hosted Bootstrap 4

I am learning Bootstrap through a Coursera course and one of the exercises has me make a toggled drop down menu for mobile screens. I have the code copied exactly as the instructor has it, but in my browser, the drop down menu wont drop down--it is just a button that does nothing when clicked. I figured this probably has something to do with the Bootstrap javascript packages not properly being loaded in or something, but I am not sure. Any help would be much appreciated. I have included my HTML here. I am quite certain the path to the directories where the js files are all correct.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class='navbar navbar-dark navbar-expand-sm bg-primary fixed-top'>
<div class='container'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#Navbar'>
<span class="navbar-toggler-icon"></span>
</button>
<a class='navbar-brand mr-auto' href='#'> Ristorante confusion</a>
<div class='collapse navbar-collapse' id='#Navbar'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item'> <a class='nav-link' href='./aboutus.html'>Home</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>Menu</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>About</a></li>
<li class='nav-item'> <a class='nav-link' href='#'>Contact</a> </li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class ="row row-header align-items-center">
<div class = "col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class = "col-12 col-sm-6">
</div>
</div>
</div>
</header>
<div class = "container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class ="footer">
<div class = "container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class ="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class = "row justify-content-center">
<div class ="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Try moving popper.js file below the bootstrap.js file
Make sure that you are not missing a my-custom-file.js that initializes the dropdown
Make sure that the dropdown structure has all the CSS class that Bootstrap needs (eg: in your code container is inside navbar, try moving that container a level up so that navbar-collapse is a direct child of navbar.
Good luck and keep it up!

I am Unable to get Show toggle

The problem I am getting is, whenever I am clicking on the Question It has to show the answer, but I am unable to get it so please help me getting it.
My code:
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<div class="bb">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
</div>
<div class="aa">
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide"><span class="frequent-icon">A</span> <span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span></li>
</div>
</ul>
</div>
</body>
</html>
<script>
$("h4.frequent-text").on('click', function() {
$(this).next(".aa").slideToggle('slow');
});
$(document).ready(function() {
$(".aa").children("li").hide();
})
</script>
You have an invalid html. You shouldn't put <div> inside the <ul> and on top of the tags of <li>.
And I edited your jquery code a bit.
$(document).ready(function() {
$(".frequent-text").hide();
$(".frequent-icon").on('click', function() {
$(this).next(".frequent-text").slideToggle('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide">
<span class="frequent-icon">A</span>
<span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span>
</li>
</ul>
</div>
</body>
</html>

Jquery Mobile Alert HTML5

I'm trying to open an alert type prompt when a link is clicked.
I have the following. Relevant code is near the bottom of the html.
$(document).ready function jqmAlert(title, message) {
// set up the 'alert' page..
$("#alert-title").html(title); // Insert the title
$("#alert-content").html(message); // Insert the dialog message
$(".ui-dialog").dialog("close"); // Ensure dialog behaviour
// Now open the page..
$.mobile.changePage("#alert", "pop", false, false);
function testAlert() {
jqmAlert("Hello", "A Hello Message");
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="lab2.js"></script>
<style type="text/css">.img {
display: block; margin-left: auto; margin-right: auto;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<img src="img/logo.png" alt="Logo"
width="150" height="120"/>
<ul data-role="listview" data-inset="true">
<li>Link to Module Overview</li>
<li><a href="#lectures" data-transition=slidedown>Link to list of lectures</a></li>
<li><a href="#labs" data-transition=slideup>Link to list of labs</a></li>
<li><a href="#functions" data-transition=fade>Link to a list of functions</a></li>
</ul>
</div>
</div>
<div data-role="page" id="overview">
<div data-role="header">
<h1>Link to Module Overview</h1>
Back
</div>
<div data-role="content">
<h2>Welcome to Module Overview</h2>
<p id="">Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
</p>
<p>Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.</p>
</div>
</div>
<div data-role="page" id="lectures">
<div data-role="header">
<h1>Link to list of lectures</h1>
Back
</div>
<div data-role="content">
<ol>
<li>Introduction</li>
<li>Web-App Development</li>
<li>Using RSS data feeds</li>
</ol>
</div>
</div>
<div data-role="page" id="labs">
<div data-role="header">
<h1>Link to list of labs</h1>
Back
</div>
<div data-role="content">
<ol>
<li>HTML 5</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ol>
</div>
</div>
<div data-role="page" id="functions">
<div data-role="header">
<h1>Link to a list of functions</h1>
Back
</div>
<div data-role="content">
<ul>
<li>Test Alert</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button onclick="testAlert()">Try it</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Two Footer</h4>
</div>
<div data-role="dialog" id="alert">
<div data-role="header" data-position="fixed">
<h3><div id="alert-title"></div></h3>
</div>
<div data-role="content">
<div id="alert-content"></div>
</div>
</div>
</body>
</html>
Try removing the inline script and use the jQM pageinit method to bind the click events that launch the dialog:
<ul>
<li>Test Alert
</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button id="btnDialog">Try it</button>
$('#functions').on('pageinit', function (event) {
$("#btnDialog, #testAlert").on("click", function (e) {
testAlert();
});
});
Here is a working DEMO

Soundcloud Minimal Page Oversize

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.

Categories