I am learning react js and trying to create a website with react js from a Html template. The template is using Jquery Isotope image filter plugin and my react code using react-router-dom for navigating page. when starting the app, in the home page the filter is working properly but when navigating to another page using the menu bar, the isotope filter does not work. It again works when i hard reload the page again. I have tried some way but that didn't work. So what is the way to use Jquery Plugin in a react js app ??
My Code is below:
Index.html page. Here i am declaring the Scripts:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="root"></div>
<script src="js/app.js"></script>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Home.js component. Here i am using the isotope filter plugin:
import React from 'react';'
export default function Home() {
return (
<>
{/* <!-- ======= Portfolio Section ======= --> */}
<section id="portfolio" className="portfolio" style={{ marginTop: "50px" }}>
<div className="container" data-aos="fade-up">
<div className="section-title">
<h2>View Our Image Store</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea.</p>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" className="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div className="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" className="img-fluid" alt="portfolio-1" />
<div className="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 portfolio-item filter-web">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" className="img-fluid" alt="portfolio-2" />
<div className="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
</div>
</section>
And the isotope plugin is initialized in main.js script file that is integrated in the index.html page above.
So when i start the app, this page Home component works fine but when i go to another menu and come again to this menu then the filter doesn't work. What is the way to do this correctly?
Also i created below hooks to load the scripts in this Home component but doesn't work.
Hooks code:
import React, { useEffect } from 'react'
export default function loadScript(url) {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
}
and called it from Home component like below:
import loadScript from '../hooks/loadScript'
export default function Home() {
loadScript("assets/vendor/jquery/jquery.min.js");
loadScript("assets/vendor/bootstrap/js/bootstrap.bundle.min.js");
loadScript("assets/vendor/jquery.easing/jquery.easing.min.js");
loadScript("assets/vendor/php-email-form/validate.js");
loadScript("assets/vendor/owl.carousel/owl.carousel.min.js");
loadScript("assets/vendor/waypoints/jquery.waypoints.min.js");
loadScript("assets/vendor/counterup/counterup.min.js");
loadScript("assets/vendor/isotope-layout/isotope.pkgd.min.js");
loadScript("assets/vendor/venobox/venobox.min.js");
loadScript("assets/vendor/aos/aos.js");
loadScript("assets/js/main.js");
But is doesn't work. What is the right way to do this?
You may be having trouble loading jquery in. I would install it as an npm package:
npm i jquery
And then load jquery into your app like so:
import $ from 'jquery'
However, I'm not sure if it's failing for a different reason. You can load jquery as an npm package which might take some pain out of things, but I doubt that the jquery plugin you want to use exists as an npm package. I should mention that it is a little bit of an anti-pattern to use jquery within a React app. Not that you can't or shouldn't, but the challenge comes in trying to build a data model that is tracked within React's state management. When relying heavily on other libraries like jquery it can start to become a lot of work to stitch the two together.
That said, sometimes it still can be worth it to make use of a jquery plugin if it accomplishes something which cannot easily be done in a React plugin. You'll have to make the decision as to which is best in your case.
Related
In my Sidebar I included a collapse button to show/hide a form. Now I want to maintain the collapse-state when refreshing the page:
If the form was un-collapsed before refreshing the page, it must stay like this after the refresh.
I think I need to use the localStrorage in JavaScript, but I actually don't know how to use this.
This is my HTML:
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-filter"></i>
<span>Search Filter</span>
</a>
</li>
</ul>
<!-- Form -->
<div class="collapse" id="collapseExample">
<form>
......
</form>
I found some code only but it seems like it does not work for me..:
var shown = []
// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);
// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);
// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
$('#collapseExample' + s).show();
}
Thanks for your help!
Here's a Bootstrap 4 collapse example that works. The main difference from the starter template is that I moved the jQuery import to the top of the file so that I could use the document.load function. I've added comments to the code but if anything's still not clear, keep asking questions. Note that I left the vanilla javascript answer for historical comments and in case it helps you, too.
I used the starter page from here:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
And the first collapse example from here:
https://getbootstrap.com/docs/4.0/components/collapse/
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script>
$(function() {
// store a reference to the collapse div so that
// we don't have to keep looking it up in the dom
const collapseExample = $("#collapseExample");
// register a callback function to the collapse div that
// will be called every time the collapse is opened.
collapseExample.on("shown.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "show"
localStorage.setItem("collapseExample", "show");
});
// register a callback function to the collapse div that
// will be called every time the collapse is closed.
collapseExample.on("hidden.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "hide"
localStorage.setItem("collapseExample", "hide");
});
// Since this function runs on page load (meaning only once), we can
// check the value of localStorage from here and then call the
// bootstrap collapse methods ourselves:
// Check the value of the localStorage item
const showExampleCollapse = localStorage.getItem("collapseExample");
// Manipulate the collapse based on the value of the localStorage item.
// Note that the value is determined by lines 36 or 44. If you change those,
// then make sure to check that the comparison on the next line is still valid.
if (showExampleCollapse === "show") {
collapseExample.collapse("show");
} else {
collapseExample.collapse("hide");
}
});
</script>
</head>
<body>
<main>
<p>
<a
class="btn btn-primary"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
END BOOTSTRAP ANSWER
BEGIN VANILLA JAVASCRIPT ANSWER
Here's a basic, self-contained version of what you seem to be trying to do. It's not pretty, but hopefully, it's clear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getCollapsed() {
const state = localStorage.getItem('collapsed');
if(state === 'collapsed'){
return true;
}
return false;
}
function getStatus(){
const resultDiv = document.getElementById('result');
const isCollapsed = getCollapsed();
if(isCollapsed){
resultDiv.innerHTML = "collapsed";
}else{
resultDiv.innerHTML = "un-collapsed";
}
}
function toggleCollapse(){
const isCollapsed = getCollapsed();
if(isCollapsed){
localStorage.setItem('collapsed', 'un-collapsed');
}else{
localStorage.setItem('collapsed', 'collapsed');
}
getStatus();
}
</script>
</head>
<body onload="getStatus()">
<div>
<button onclick="toggleCollapse()">Toggle Collapse</button>
</div>
<div id="result"></div>
</body>
</html>
Im working on a flask app and in my index.html I have a js file that has a smooth scrolling script in it. The smooth scroll works as far as clicking on links and the page goes to that section nice and smooth, but I have a web form that Im trying to process with flask. When I run the app.py and then go to the url it gives my sites loads, but if I fill out the form and submit nothing happens. I get an error in dev console:
uncaught TypeError: Cannot read property 'top' of undefined
at HTMLInputElement.<anonymous> (main.js:33)
at HTMLInputElement.dispatch (jquery-3.4.1.min.js:2)
at HTMLInputElement.v.handle (jquery-3.4.1.min.js:2)
When I comment out the smooth scroll code and run the app, the form works correctly when I click submit. App.py prints out my data and the success page is loaded. The problem is the smooth scroll but I dont know why, because again it actually does smooth scroll but when the code is active but it wont let the submit work.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/b015121141.js"></script>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="../static/css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="../static/css/widescreen.css">
<title>System Services</title>
</head>
<body id="home">
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-robot"></i>
</span>Systems
</h1>
<ul>
<li>Home</li>
<li>What</li>
<li>Who</li>
<li>Contact</li>
</ul>
</nav>
<!-- header: Showcase -->
<header id="showcase">
<div class="showcase-content">
<h1 class="l-heading">
Take me to your leader
</h1>
<p class="lead">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates alias quasi eligendi. Itaque, repudiandae
obcaecati accusamus harum nesciunt possimus magni?
</p>
Read More
</div>
</header>
<!-- Section: Contact-->
<section id="contact">
<div class="contact-form bg-primary p-2">
<h2 class="m-heading">Contact Us</h2>
<p>Please Use the form below to contact us</p>
<form action="/submit" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="Enter Phone">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="" placeholder="Enter Message"></textarea>
</div>
<input type="submit" value="Submit" class="btn btn-dark">
</form>
</div>
<div class="map"></div>
</section>
<!-- Footer -->
<footer id="main-footer" class="bg-dark text-center py-1">
<div class="container">
<p>Copyright © 2019, All Rights Reserved</p>
</div>
</footer>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Local Js file -->
<script src="../static/js/main.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=[api]&callback=initMap"
async defer></script>
</body>
</html>
success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Success</title>
</head>
<body>
<H1>Success!!</H1>
</body>
</html>
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/submit', methods=['POST'])
def submit():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
phone = request.form['phone']
message = request.form['message']
print(name, email, phone, message)
return render_template('success.html')
if __name__ == '__main__':
app.debug = True
app.run()
main.js
//init and add the map
function initMap() {
// your location
const loc = { lat: 42.964890, lng: -88.183040 };
// centered map on location
const map = new google.maps.Map(document.querySelector('.map')
, {
zoom: 10,
center: loc
});
// the marker, positioned at location
const marker = new google.maps.Marker({ position: loc, map: map });
}
// Sticky menu background
window.addEventListener('scroll', function () {
if (window.scrollY > 150) {
document.querySelector('#navbar').style.opacity = 0.88;
} else {
document.querySelector('#navbar').style.opacity = 1;
}
})
// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
if (this.hash !== '') {
event.preventDefault();
const hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
},
800
);
}
});
The problem is really related on jquery forum and don't came from flask. Nevertheless, they are solutions :
Solution #1:
Use the native css smooth scroll (works fine in your case in my opinion) --> Smooth scroll
Solution #2 :
Try to call animate() in console of your website and paste it belowthe result to see where the problem came from :)
I hope this will help you I tried on my computer and I can figure any other solutions !
You have the line this.hash inside your click event which will always return "" and that is the reason you are getting the error because you have the hash/id in the href attribute of the links and buttons where you are binding the click event
<ul>
<li>Home</li>
<li>What</li>
<li>Who</li>
<li>Contact</li>
</ul>
<input type="submit" value="Submit" class="btn btn-dark">
Read More
and you just need to change the
this.hash
to
$(this).attr('href')
OR
this.href
your click event should look like this
// Smooth Scrolling
$('#navbar a, .btn').on('click', function (event) {
if (this.href !== '') {
event.preventDefault();
const hash = this.href;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
},
800
);
}
});
I am working on an asp.net mvc web application which contain a web template similar to this web templete.
now i am facing this problem:-
let say a user access the image gallery , and while the page is loading , he clicks on an image. then this will cause the image to be displayed seperately inside a new windows and not inside the jQuery slider. while if he wait till the page fully loaded then there will not be any problem.
what i can not understand is that i am referencing all the scripts before rendering the page body. so this mean that the image gallery should not be available in the browser unless all the scripts are being fully loaded, but this is not the case.
here is how my _layout view looks like, where i am referencing all the scripts before the Renderbody():-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="~/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="~/img/favicon.ico" type="image/x-icon" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="">
<title>#ViewBag.Title </title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Customcss")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</head>
<body>
<!--==============================header=================================-->
<!-- <div class="container body-content">-->
#RenderBody()
and here is the view that is causing the problem :-
<header id="header" class="headerpages">
<div class="bgpattern"></div>
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</header>
<div id="content">
<!--==============================row7=================================-->
<div class="row_7">
<div class="container">
<h2 style="text-align:center" >Project</h2>
<br/>
<div class="row">
<h2 class="padbot1">
Villa
</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">Villa</h5>
<figure><img src="~/img/T/a.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More about this vella<br /> </figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;"/>
<h2 class="padbot1">
Triplex</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">The TROJANA (Macedonian Oak) Triplex</h5>
<figure><img src="~/img/T/trojana.jpg" alt=""><span><strong>Project name:</strong><em>The TROJANA (Macedonian Oak) Triplex</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More</figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;" />
#Html.Partial("~/Views/Shared/_table.cshtml")
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 gmap">
<div class="map">
<iframe src="https://www.google.com/maps/embed/v1/place?key=A...."></iframe></div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(window).load(function () {
//form1
$('#form1').sForm({
ownerEmail: '#',
sitename: 'sitename.link'
})
//thumb
// Initialize the gallery
$('.thumb').touchTouch();
});
</script>
<style>
#prevArrow, #nextArrow {
display: none;
}
</style>
so can anyone adivce how to fix this problem ? and why the image gallery will be available in the browser while the browsers is still loading the scripts ???
I know this problem has been solved but for the people who visit here, in case anyone else runs into the same problem and find it here.
As https://stackoverflow.com/users/575199/malk commented
use
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
instead of
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
The code below prevents the user from clicking the document(images or anything else) until the page is fully loaded. Add $(document).click(false); to $(document).ready function and $(document).click(true) to $(window).load function.
$(document).ready(function() {
$(document).click(false);
});
$(window).load( function(){
$(document).click(true);
});
I want to have a swipe function in my first html page of the mobile application that I am implementing. I use Phonegap 2.9 and Eclipse. For this function, I used from this files the Page_scrolling.html and the JavaScripts it calls.
My head in .html file that I want to have the swipe function:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Guide-Me For-All</title>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
<!-- import stylesheets -->
<link rel="stylesheet" type="text/css" href="../../css/home/home.css">
<link rel="stylesheet" type="text/css" href="../../css/home/home-eng-fonts.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="../../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
<!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" /> -->
<link href="css/main.css" type="text/css" rel="stylesheet" />
<!-- import js -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/connect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/home/change_page.js"></script>
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="../../plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="../../plugins/js/main.js"></script>
<script src="../../plugins/swipe.js"></script>
According to the link, I needed the last .css link and the last four .js links. The forth JavaScript is the one that is inside the Page_scrolling.html in the tutorial I put above. The only file that I changed, is the last JavaScript:
My Swipe.js contains :
$(function() {
$("#trust_us").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#how_it_works").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#owners").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#sign_up_in").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
//Swipe handlers.
function swipe1(event, direction, distance, duration, fingerCount) {
$(this).text( "You have swiped " + direction +' with ' + fingerCount +' fingers' );
}
function swipe2(event, phase, direction, distance) {
$(this).text( phase +" you have swiped " + distance + "px in direction:" + direction );
}
});
//{ swipeStatus:swipe2, allowPageScroll:"horizontal"}
My body file is divided in the divs I want to swipe:
<body>
<div id="logo">
<img id="lg" src="../../imgs/logo.png" alt="Logo">
</div>
<div id="trust_us">
<div id="trust_us_h2">
<h3>Why you should trust us :</h3>
</div>
<ul>
<li><p>All the info about the shops, are being validated with their owners.</p></li>
<li><p>You can send your thoughts or complaints to the shops' owners, so that they will do improvements to it. *</p></li>
</ul>
<div id="notice">*Only for occasions when there was a contact between administrator - shop's owner!</div>
</div> <!--trust us-->
<div id="how_it_works">
<div id="how_it_works_h2">
<h3>How it works :</h3>
</div>
<div id="first">
<h5>First:</h5>
</div>
<div id="Sign_Up" class="float-left">
<img src="../../imgs/1sign-up.png" alt="Sign-Up">
<p> 1. Register</p>
</div>
<div id="Rate" class="float-right">
<img src="../../imgs/5rate.png" alt="Rate">
<p>5. Rate it according to your experience</p>
</div>
</div> <!--how it works-->
<div id="owners">
<div id="owners_h2">
<h3>For the owners of a shop :</h3>
</div>
<ol>
<li><p>Register</p></li>
<li><p>After that, you can take interesting reports and useful statistics about your shop. *</p></li>
<li><p>Now, you can do improvements to your shop according to what the customers need so you can get even more of them.</p></li>
</ol>
<div id="notice">*Contact the admin of the app for more information.</div>
</div> <!--owners-->
<div id="sign_up_in">
<h2>...REGISTER NOW OR SIGN IN...</h2>
Sign-Up Now!
</div>
<div id="last_line">
<br>
</div>
<div id="footer">
<p>Copyright (c) 2014 Guide-Me For-All. Design by Marialena S.</p>
</div>
</body>
What Is happening right now, Is when I swipe to the left or to the right a div, it disappears and in it's place it appears a message. And all the divs are in a vertical row. There are all viewable from the start when you scroll the page. What I want now, is when I swipe to the right the first div for example, to display the second div. In the same way I want to do the swipe to left function to display the previous div. That's all. I tried many other options but this looks the most simple.
I couldn't find the solution to my problem but I found this very nice tutorial and it's really simple to to do the swipe function. But if anyone finds my mistakes to the above code, please post the answer so that I can learn how to do the swipe function with this method too.
I'm creating a simple web application with Metro UI framework (http://metroui.org.ua/) where I would like to show a map.
I have decided to use Nokia HERE maps and its javascript API but even if I follow this example https://developer.here.com/javascript-apis/documentation/maps/topics/quick-start.html I'm getting just a white div with the HERE logo. The only browser where the map displays correctly is Chrome.
I figured out that problem must be somewhere in the compatibility between maps and metro-bootstrap.css because when I remove it, the maps show correctly. I use ASP.NET MVC with master page rendering.
Is there anyone who knows how to solve this issue?
Here is my HTML code
<!DOCTYPE html>
<html lang="cs">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="/js/jquery-2.1.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="http://js.api.here.com/se/2.5.4/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
<script src="/js/metro.min.js"></script>
<link href="/css/metro-bootstrap.css" rel="stylesheet" />
<link href="/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="/css/iconFont.min.css" rel="stylesheet" />
<link href="/css/customStyling.css" rel="stylesheet" />
<script src="/js/maps.js"></script>
</head>
<body class ="metro">
<div class="container">
<h1 class="fg-white"><span class="icon-cloudy on-left fg-white"></span>TEVI</h1>
<br />
<script src="/js/metro/metro-tile-transform.js"></script>
<script src="/js/user-interaction.js"></script>
<div id="tilesArea">
<div id="0" class="tile live double bg-lightBlue " data-role="live-tile" data-effect="slideUpDown" data-click="transform" data-period="3581" onclick="showDetails(this)">
<div class="tile-content text-left fg-white subheader text-left">
<div class="padding10"><span class="icon-thermometer on-left"></span>-10 °C</div>
</div>
<div class="tile-content text-left fg-white subheader text-left">
<div class="padding10"><span class="icon-rainy-2 on-left"></span>200 mm</div>
</div>
<div class="tile-status padding10">
<span class="name">Cidlo 1</span>
</div>
</div>
.
.
.
</div>
<hr />
<div id="detailsArea">
<p>
...
</p>
</div>
<hr />
</div>
<div id="mainMapArea"></div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"728fd54a207c4b32a11a57ed0a099b2b"}
</script>
<script type="text/javascript" src="http://localhost:49764/654ba5e681db49c6b825ad5f35203c7d/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And here is javascript file maps.js which contain function to show the map:
function showStartupMap() {
nokia.Settings.set("app_id", "my app id");
nokia.Settings.set("app_code", "my app code");
nokia.Settings.set("serviceMode", "cit");
var map = new nokia.maps.map.Display(
document.getElementById("mainMapArea"), {
// Zoom level for the map
zoomLevel: 10,
// Map center coordinates
center: [52.51, 13.4]
}
);
}
$(document).ready(function () {
showStartupMap();
})
Any suggestions are welcome. Thank you