I have a JSON file which contains the address of pics, I used get JSON for connect to JSON file, and also I am using a plugin called"lightslider" to show the pictures, my problem is when I run the HTML noting show but after refreshing the page it shows. and other problem is it is work only on fire fox. and also in server not working on server. please give me some easy and possible way to show my pic on slider from JSON file which is works on all browser. thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>link3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lightslider.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="lightslider.js"></script>
<script>
$(document).ready(function() {
$('#image-gallery').lightSlider({
item:1,
speed:500,
auto:true,
loop:true,
pause: 3000,
pauseOnHover:true,
thumbItem:9,
slideMargin: 0,
autoWidth:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
<script>
$(document).ready( function(){
$.getJSON('slides.json', function(data) {
$("h2").html(data[0].title);
$.each(data, function (i, f) {
if(i>0){
$("#image-gallery").append("<li><img src=" + f.content + "/></li>");
}
});
});
});
</script>
</head>
<body>
<h2 style="text-align: center; font-weight: bolder;">
</h2>
<div class="clearfix container" style="max-width:900px;" >
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
</ul>
</div>
</body>
</html>
regarding your problem on JavaScript only working after refreshing try to wrap your code in window.onload = function(){} so that your code is loaded after DOM is fully loaded.
Related
I downloaded an awesome JQuery scripts/plugin and I am trying to get the script incorporated into my project. I want to be able to share data or value from JQuery in the Head section of the HTML file to the Javascript in the Body of HTML file. I've tried different ways after reading up many threads and forums and stackoverflow questions but none seem to help me. I keep getting X function is not defined. Have a look at this sample code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/socket.io/socket.io.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<title>Testing</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vendor/raphael-min.js"></script>
<script src="/RGraph/libraries/RGraph.svg.common.core.js" ></script>
<script src="/RGraph/libraries/RGraph.svg.line.js" ></script>
<script src="/RGraph/demos/demos.js" ></script>
<script>
$(document).ready(function(){
var socket = io();
socket.on('sensor_values',function(msg){
line.update(msg[0].value); //<------- This function is defined in the Javascript below
});
});
</script>
</head>
<body>
<div style="width: 750px; height: 300px" id="chart-container"></div>
<script>
iteration = 0;
data = [];
labels = [
'','','','','','','','','','',
'','','','','','','','','',''
];
line = new RGraph.SVG.Line({
id: 'chart-container',
data: [data],
options: {
marginInner: 0,
title: 'GasBoss Demo Chart',
xaxisLabels: labels,
xaxisColor: '#aaa',
yaxis: false,
backgroundGridColor: '#eee',
backgroundGridVlines: false,
backgroundGridBorder: false,
colors: ['#00c','#c00'],
linewidth: 1,
tickmarksStyle: 'filledcircle'
}
}).draw();
function update (svalue) //<-------this is the function I am trying to call in the JQuery code above
{
if (iteration === 0) {
line.originalData[0] = RGraph.SVG.arrayPad([],20);
}
line.originalData[0].push(svalue);
line.originalData[0].shift();
line.properties.xaxisLabels.push(iteration + 1)
line.properties.xaxisLabels.shift();
RGraph.SVG.redraw();
iteration++;
}
</script>
</body>
</html>
When start typing the function name in the JQuery section, it pops up a context menu with the name of the function for me to select. That means to me that JQuery is able to see all the functions and variables from within Javascript code, but it still raises Update is not a function. Why? and how do you share or pass data between JQuery and Javascript as described above in their respective place within the HTML file.
we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
The code for the website I'm currently working on (posted below) is currently not functional. When it was all contained in only the index.html file (meaning all of my code, other libraries / plugins were referenced correctly and stored elsewhere of course), everything worked perfectly. I'm trying to change the structure of the site to function using JQuery's load function, however, so I can swap the #content-display div out for different information when someone clicks a link, allowing me to add JQuery animations for a seamless experience.
There may be an easier way to accomplish this effect, but I'd like to learn what's going wrong with the load function now so that I can use it effectively for projects in the future.
I'm including all of the relevant code below. I'd like to get the slideshow operational again and then from there I should be able to fix the other functions myself. The slideshow uses the plugin MaxImage2.
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Personal Portfolio of Christopher Willingham" name=
"description">
<meta content="" name="author">
<title>CWPhotography</title>
<link href="img/icons/favicon.ico" rel="icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:Light' rel='stylesheet' type='text/css'>
<link charset="utf-8" href="css/jquery.maximage.css?v=1.2" media="screen"rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-md-offset-1">
christopher willingham photography
</div>
<ul class="col-md-5 alignright" id="navlist">
<li>
<a id="link-portfolio">portfolio</a>
</li>
<li>
<a id="link-about">about</a>
</li>
<li>
<a id="link-contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content-display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf-8" src="js/lib/jquery.cycle.all.js" type="text/javascript"></script>
<script charset="utf-8" src="js/lib/jquery.maximage.js" type="text/javascript"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/modules/jfunc.js">
(function(){
Main.init();
Main.bindUI();
}());
</script>
</body>
</html>
jfunc.js (located under js/modules/jfunc, relative to the index):
var Main = {
init: function() {
$('#content-display').load("slideshow.html");
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 800,
timeout: 7200,
},
onFirstImageLoaded: function() {
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});
},
bindUI: function() {
$('#link-portfolio').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'portfolio.html',
success: function() {
$.get('portfolio.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-about').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'about.html',
success: function() {
$.get('about.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-contact').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'contact.html',
success: function() {
$.get('contact.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-slideshow').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'slideshow.html',
success: function() {
$.get('slideshow.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
}
};
slideshow.html (stored in the same folder as index.html):
<html lang="en">
<div id="maximage" class="mc-cycle transitDiv" >
<div class="first-item">
<img src="img/slideshow/slide1.jpg" alt="" width="2048" height="1152" />
</div>
<img src="img/slideshow/slide2.jpg" alt="" width="2048" height="1152" />
<img src="img/slideshow/slide3.jpg" alt="" width="2048" height="1152" />
<img src="img/slideshow/slide4.jpg" alt="" width="2048" height="1152" />
</div>
</html>
Once again, just to reiterate, I wasn't having any issues until I tried separating the code into different objects and calling the .load function from the js file, so I'm assuming the issue is with my pathing or in the syntax I use to call the functions, but I've been trying everything I can think of and I'm at wit's end now. Your help is truly appreciated.
You cannot have a <script> tag with both a .src property and script between the tags. You must use two separate <script> tags for that.
Change this:
<script src="js/modules/jfunc.js">
(function(){
Main.init();
Main.bindUI();
}());
</script>
to this:
<script src="js/modules/jfunc.js"></script>
<script>
(function(){
Main.init();
Main.bindUI();
}());
</script>
P.S. there appears to be no reason for the IIFE either. You're just making two function calls. No reason to wrap another function around that.
I have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.
The request I have made works in the index.html file but not in any others which is greatly frustrating. I think it is to do with the onDeviceReady function but I am not sure how to change or fix this?
Here is the separate page (not index.html) code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<script src="cordova-1.8.1.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/load-whites.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="whites">
<div data-role="header" data-position="fixed">
<h1>White Wines</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div id="whites"></div>
</div>
</div>
</div>
</body>
Here is the request that works for the index.html file but not for any other .html files in my phonegap project (Cordova 1.8.1). How could I change it so that it does work? the file below is load-whites.js:
$(document).ready(function(){
$(document).bind('deviceready', function(){
onDeviceReady();
});
function yourCallback(button) {
if (button == 2) {
dataRequest();
}
}
function dataRequest() {
var output = $('#whites').text('Loading white wines and their deta1ils, please wait...');
$.ajax({
url: 'http://localhost/whites.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
output.empty();
$.each(data, function(i,item){
var whites = '<div data-role="collapsible"><h3>'+item.Name+'</h3>'
+'<b>Price:</b> £'+item.Price+'<br />'
+'<b>Vintage:</b> '+item.Vintage+'<br />'
+'<b>Country:</b> '+item.Country+'<br />'
+'<b>Grape:</b> '+item.Grape+'<br />'
+'<b>Alcohol:</b> '+item.Alcohol+'%<br /><br />'
+item.Description+'</p></div>';
output.append(whites);
$('#whites').trigger('create');
});
},
error: function(){
output.text('The Wines could not be loaded at this time.');
navigator.notification.confirm(
'Please check your internet connection. Would you like to retry?',
yourCallback,
'Something went wrong',
'No,Yes'
);
}
});
}
dataRequest();
});
Any help would be greatly appreciated. Thanks again.
I see you are using JQuery mobile. Its possible it could be similar to a problem I had today and JQuery mobile was the culprit. http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html
If you are declaring the Javascript file in the header another page other than the index, it will ignore it. If this is your problem, declare the JS file load-whites.js in the index then..
$( document ).delegate("#PAGENAME", "pageinit", function() {
//do work here
});
Not sure if this is your problem, but could be!