I've tried many times to run this code but every time it appears incorrectly I want angular to make its affect like this demo:
http://wowslider.com/angular-slider-collage-demo.html.
Please help, I've tried too many times without the intended result.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
Related
I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.
Here is my code:
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
Thank you all in advance for your response.
using
data-original-title
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
using
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
at the end of the body tag (after jQuery and Bootstrap)
Aslo use
title="Column1 | Column2 <br> Value1 | Value2"
instead of
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
the final version could be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>
I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>
So I have a listview in which each component wired to an on click function which looks like this:
function launchNewPage() {
$.mobile.changePage( "newPage.html", { transition: "slide"} );
}
The problem I am encountering has to do with the next page. The page shows up just fine, but none of the resources are loading. When I inspect the page in firebug, none of the necessary JS files are loaded. On top of this, it doesn't seem like the $(document).ready function is ever getting executed. Does anyone have any insight as to what I am doing wrong? Sorry, I am a bit new to JQ... Thanks in advance.
Requested HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="CSS/JqueryMobile.css" />
<link rel="stylesheet" href="CSS/theme.css" />
<link rel="stylesheet" href="CSS/JQM-DatePicker.css" />
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/JqueryMobile.js"></script>
<script type="text/javascript" src="JS/JQM-DatePicker.js"></script>
<script type="text/javascript" src="JS/mockjax.js"></script>
<script type="text/javascript" src="JS/soyutils.js"></script>
<script type="text/javascript" src="JS/fields.js"></script>
<script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
<script type="text/javascript" src="JS/AddingForm.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="x">
<div class="ui-body-x" data-role="header" data-position="fixed">
<h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
<div data-type="horizontal" class="ui-btn-right ui-button-group">
<a id="cancelButton" href="http://www.google.com" data-role="link" data-ajax="false">Cancel</a>
<a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="x">
<form id="f" src="#"></form>
</div><!-- /content -->
</div><!-- /page -->
</body>
You cannot start the jQuery mobile with $(document).ready() you should started like this:
try to work with this in the first HTML
$("div[data-role*='page']").live('pageshow', function(event, ui) {
document.location.href="newPage.html";
});
Geoff, if you are using the Beta 3 version of the JQM framework, read this. It will help shed light on the DOM and $(document).ready(). You may want to consider the "pagecreate" and "pagebeforecreate" events. They are delineated in the doc referenced in the above link.