I have this code for scrolling up and down in Html :
<div id="Response" class="comment"></div>
<br>
<br>
<br>
<br>
<div class="but4 , text15"><a id="Resp" href="#rp">Answer</a></div>
and this code in Jquery :
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$("#Resp").click(function () {
$("html").animate({ scrollTop: $("#Response").offset().top }, 1200);
});
</script>
but it's not working .. how can I fix this ? I want when I click on answer it scroll to up and go to Response div .
I'd suggest using the ScrollTo plugin instead of rolling your own solution: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Demo is here: http://demos.flesler.com/jquery/scrollTo/
You can easily specify duration: http://demos.flesler.com/jquery/scrollTo/
EDIT
The solution we came up with in chat is this (not includingscript tags):
$(function () {
$("#Resp").click(function () {
$("body").scrollTo($("#Response"), 1200);
});
});
This depends on the browser implementation, but you can get it to work in webkit (safari, chrome) and firefox with
$('html, body').animate({ scrollTop: $("#Response").offset().top }, 1200);
Related
I currently have a mobile site I am building and I am having trouble with integrating a custom JQuery widget. For some reason the the pageshow event is firing twice for whichever page is loaded first.
For ease of understanding I have created two HTML pages
Page 1
<!doctype html>
<head>
<meta charset="utf-8">
<title>One</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-one">
<div role="main" class="ui-content" id="one-content">
One<br/>
back to two
</div>
<script type="text/javascript">
(function($, undefined) {
$.widget("test.stuff", {
_create : function() {
console.log("create");
},
_init : function() {
console.log("_init");
},
destroy: function () {
this.element.empty();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).on("pageshow", "#content-one", function () {
console.log("pageshow1");
$("#content-one").stuff({});
});
$(document).on("pagebeforeshow", "#content-one", function () {
console.log("pagebeforeshow1");
});
</script>
</div>
</body>
</html>
Page 2
<!doctype html>
<head>
<meta charset="utf-8">
<title>Two</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
});
</script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
</head>
<body id="default">
<div data-role="page" id="content-two">
<div role="main" class="ui-content">
Two<br/>
back to one
</div>
<script type="text/javascript">
$(document).on("pageshow", "#content-two", function () {
console.log("pageshow2");
});
$(document).on("pagebeforeshow", "#content-two", function () {
console.log("pagebeforeshow2");
});
</script>
</div>
</body>
</html>
To recreate load page one first, navigate to page two using link, then navigate to page one using link.
When page one is loaded again the pageshow event is fired twice. I have the reloadPage set to true as I have dynamic content for my pages and I cannot serve cached pages.
I very well could be using the events incorrectly.
Try substituting your $(document).on("pageshow",...) with $(document).one("pageshow", ...), which restricts the event to one call http://api.jquery.com/one/.
The problem is that using on in the inline script creates a new event each time the page is loaded. So the first time you load the page, the inline script is executed and the pageshow event is triggered. The second time a new event is triggered again, but the first one is still listening to content-one pageshow. In fact, if you repeat the process you'll see the log three, four, ... times.
Another option could be to create a script in the head section which sets up all required triggers in $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). In this case, the script will only be initialized once, so it will work.
Wasted about 2 hours trying to do all the fixes on here and other sites. I gave up and put an if statement in their to prevent it from firing again
var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
if (hasDownload === false) {
hasDownload = true;
// do some work
}
);
Try to remove the page on hide event, like so :
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.reloadPage = true;
$(docuement).on('pagehide', function (event, ui) {
$(event.target).remove();
});
});
Remenber that if you don't disable ajax, all request will be with AJAX
I want to implement Nivoslider for a slideshow as well as jQueryUI pop-op boxes. When I implement them as separate entities, then the pop-up boxes stop working as they should.
Is there a way to implement them together, or is there a fatal error?
By the way, I am a complete noob when it comes to js - please be kind and spell things out for me please :D
This is the code for Nivoslider:
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 2000, // Slide transition speed
pauseTime: 6000, // How long each slide will show
});
});
</script>
and this is the code for jQuery UI pop-up box:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
My implementation based on the demo script provided with Nivo Slider, just add in jquery UI and use this code. It stores the slider information and re-creates the slider each time the dialog is opened.
HTML Code
<div id="wrapper">
dev7studios
<button id="btnTestMe">Open Slideshow</button>
</div>
<div id="dlgTestMe">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
JQuery Code
$('#btnTestMe').click(function(e){
e.preventDefault();
$('#dlgTestMe').dialog({
open: function(){
var data = $('.slider-wrapper').html();
if (typeof($(this).data("slider")) == "undefined"){
$(this).data("slider", data);
}
$('#slider').nivoSlider();
}, beforeClose: function(){
$('#slider, .nivo-controlNav, .nivo-html-caption').detach();
$(this).children('.slider-wrapper').html($(this).data("slider"));
}
});
});
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
I've just put a facebook like button on my rails app by adding the following tag into an html.erb page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>
And ... that works OK but I get a big white space on the page as the facebook sdk is loading. So, I thought I'd try putting this in my application.js file and running the function after the page is loaded. The only problem is that I can't get this to work at all :)
So far, I've kept the "fb-root" div in the html and I've placed the following function into application.js
$(function() {
$('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});
However, this is not working for me and I can't figure out why (I'm a js newb). Any help would be greatly appreciated. Thanks!
You should load the javascript function asynchronously:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Then once the javascript library has loaded, it will convert your fbml like button into the appropriate html iframe code. If it is showing a white space until it loads, put the like button fbml code inside a div and style that div with css.
Here is a full example which doesn't have the issue you are talking about (I load the javascript library asynchronously, on a timed delay to simulate a slow load. Notice that there is no white while the load button is loading.
<!DOCTYPE html>
<html>
<body bgcolor="#000">
<div id="fb-root"></div>
<fb:like href="http://stackoverflow.com" send="" width="100" layout="button_count" action="recommend"></fb:like>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
// delay to simulate slow loading of Facebook library - remove this setTimeout!!
var t = setTimeout(function() {
alert('loading fb');
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}, 3000);
}());
</script>
</body>
</html>
OK, I figured this out. First, I put the following tags in the html:
home.html.erb
<div id="fb-root"></div><div id="facebook">[Facebook]</div>
The important tag here is "fb-root" as that is what Facebook's javascript will look for. Then, in my js file I add this function:
application.js
// facebook recommend button
$(function() {
likebutton =
'<fb:like href="" send="" width="100" show_faces="" ' +
'font="" layout="button_count" action="recommend">' +
'</fb:like>';
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
FB.init({appId: 141936272547391,
status: true,
cookie: true,
xfbml: true
});
$('#facebook').replaceWith(likebutton);
});
});
And, no more white box, if he client doesn't have JS enabled they just see "[Facebook]" and my code is nice and maintainable. :)
I'm trying to use jQuery UI's .tabs() to obtain content via AJAX, but the default behavior is to grab the entire page's content. How would I obtain content from a specific #id and/or multiple #id's?
I have a feeling I will need to use the load: event (http://docs.jquery.com/UI/Tabs#event-load), but I need an assist figuring this out.
Example:
The Page with the tabs that is getting and displaying the tabbed content. I have placed #content after the first #the_tabs link to retrieve in an attempt to obtain that specific region of the content, but the entire page is still loaded.
<div id="tabs">
<div id="tabs_display">
</div>
<ul id="the_tabs">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div><!-- /#tabs -->
The page being retrieved by the previous markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Remote HTML Page Example</title>
</head>
<body>
<div id="content">
I want this content
</div>
<div id="other_stuff">
Not this content
</div>
</body>
</html>
the JS (for setup purposes):
$(document).ready(function(){
/* Tabs
--------------------*/
$(function() {
var $tabs = $('#tabs').tabs({
});
});
});
In Jquery-UI 1.9, "ajaxOptions" is depreciated; so instead the code below worked for me:
(ref: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)
$(function() {
$( "#the_tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).filter("#content").html();
};
}
});
});
$(document).ready(function(){
/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
ajaxOptions: {
dataFilter: function(data, type){
return $(data).filter("#content").html();
}
}
});
});
Solution props to Supavisah in #jquery on irc.freenode.net
I have had luck using .find, rather than .filter. Like this:
$(document).ready(function(){
$('#the_tabs').tabs({
ajaxOptions: {
cache : true,
dataFilter: function(data){
return $(data).find('#content');
},
}
});
});