Program: Eclipse (Phonegap)
Phone: HTC Desire (2.2.2)
I've been playing around with the iscroll plugin for some time now but it seems i can't get it to work. When i test it in both the android emulator and my phone it keeps scrolling back to the the top. Also the LogCat gives the following line:
"Miss a drag as we are waiting for webcore's response for touch down"
Javascript:
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('scroll-content', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false});
setTimeout(function () { theScroll.refresh() }, 0);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
HTML:
<div id="wrapper">
<div id="main-content">
<div id="pages">
<div id="map" class="current">
</div>
<div id="camera">
<button class="camera-control" onclick="capturePhoto();">Capture Photo</button>
<div style="text-align:center; margin:20px 0 0 0;">
<img id="cameraPic" src="" style="width:50%; height: 50%;"/>
</div>
</div>
<div id="buzz">
<div id="scroll-content">
<ul id="your-tweets"></ul>
</div>
</div>
<div id="info">
<p>Informatie Evident</p>
</div>
</div>
</div>
</div>
I'm populating the list with tweets called in with JSON. Hope somebodey can help!
The full iScroll syntax is: iScroll(element_id, object options).
Options are here.
Among the options we have bounceLock (if set to true the scroller stops bouncing if the content is smaller than the visible area. Default value is false).
Hope this is what you were searching for
To keep it from scrolling to the top you will need to create the scroll object after the first time you "show" your element. To dynamically add data to this element and maintain a proper scroll with scrolling bars, you can use the following script after each time you add data to the list:
var myScroll = null; //set this initially
// Check if scroll has been created, if so, destroy and recreate
if (myScroll != null){
myScroll.destroy();
}
myScroll = new iScroll('call-list', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });
Related
This is my first question on stack overflow and I'm new to javascript/jquery so i will try my best to explain my problem.
I have two images that are animated into the centre of the browser on the x axis and these work fine on loading of the page. My problem occurs when I resize the browser after it has loaded. The elements do not stay in the center of the browser and are off center until I refresh the page and it works fine again.
I was wondering if there are any techniques to eradicate this issue?
Website can be viewed at www.puzzletest.click
Thank you in advance.
<div id="fullpage">
<div id="section1" class="section">
<div>
<img src="img/softsellcloud.png" class="ss-cloud" alt="Soft Sell Online - Business Automation Software">
<img src="img/softselltext.png" class="ss-text" alt="Soft Sell Online - Business Automation Software">
</div>
<div class="caption">
<h1>Business Automation Software.</h1>
<h2>We Help Companies Work Smarter!</h2>
<img src="img/phone-log.png" alt="Phone Us Now">
</div>
<div>
<img src="img/scroll-arrow.png" alt="Scrolling Arrow" id="arrow1" class="arrow">
</div>
</div>
My javascript code is this...
$(document).ready(function() {
$('#fullpage').fullpage();
});
$(document).ready(function() {
$(".ss-cloud").animate({
left: $(".ss-cloud").parent().width() / 2 - $(".ss-cloud").width() / 2
}, 2000);
});
$(document).ready(function() {
$(".ss-text").animate({
right: $(".ss-text").parent().width() / 2 - $(".ss-text").width() / 2
}, 2000);
});
$(document).ready(function() {
$( ".caption" ).delay(2000).animate({
opacity: 1,
}, 3000, function() {
});
});
You need to use the .resize function so the script fires everytime you resize your window.
$(window).resize(function(){
// Your code here
});
see also:
https://api.jquery.com/resize/
I want to be able to scroll through the whole page with moving scroll bar but the scroll bar not moving although i able to scroll with mouse well.
My html ：
<div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal mCSB_scrollTools_vertical" style="display: block;">
<div class="mCSB_draggerContainer" >
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
Jquery :
(function($){
$(window).load( function() {
$(".mCSB_draggerContainer").css("height", "1550px");
$(".mCSB_draggerContainer").css("overflow-y", "hidden");
$.getScript("//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.7/jquery.mCustomScrollbar.concat.min.js", function () {
$('mCSB_draggerContainer').mCustomScrollbar({
theme: "light-3"
});
});
});
})(jQuery);
I am building a phonegap application with iscroll used for scrolling. I am facing a problem when I dynamically append controls to a div and show/hide the div on click. The div shows up and then hides automatically. I have given the code samples below. Would greatly apperciate any help.
First I tried with scroll.refresh() alone, but since it did not work, I tried destroying and recreating according to a forum post in google. But, it does not work either.
HTML
<div class="wrapper" id="wrapper">
<main class="content" id="scroller">
<ul>
<li>
<span id="usertype-link">
</span>
<div class="b-preferences__select b-preferences__select--type" id="search-user-type-div">
</div>
</li>
</ul>
</main>
</div>
JS
$('#search-user-type-div').hide();
$('#usertype-link').bind('click', function () {
if ($('#search-user-type-div').is(":visible")) {
$('#search-user-type-div').hide();
$('#usertype-link').removeClass('open').addClass('close');
}
else {
$('#search-user-type-div').show();
$('#usertype-link').removeClass('close').addClass('open');
}
//scroll.refresh();
searchpreferences.rebuildScroll();
})
rebuildScroll: function () {
scroll.destroy();
scroll = null;
scroll = new iScroll('wrapper', { vScrollbar: true, hScrollbar: false, vScroll: true, hScroll: false, onBeforeScrollStart: null });
//setTimeout(function () {
scroll.refresh();
//}, 0);
}
Any help would be appreciated.
Priyan
I don't have an exact solution, but I recommend to use the most recent version of iScroll (v5). It was totally rebuild and maybe fixes your problem.
I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});
I wrote some jquery code (from one video tutorial) to make mousehover zoom effect like in google pictures.
I want to add some delay before zoom (0.5-1 sec), but I don't know how to do that!!!
I've tried a lot of methods with delay() or setTimeout(), but nothing helps!!!
I do not know why...
Here is the javascript code:
$(function(){
$.fn.popOut=function(user_opts){
return this.each(function(){
var opts=$.extend({
useId:"poppedOut",
padding:20,
border:0,
speed:200
},user_opts);
$(this).mouseover(function(){
// kill any instance of this already
$("#"+opts.useId).remove();
// make a copy of the hovered guy
var $div=$(this).clone();
// setup for prelim stuff
$div.css({
"position":"absolute",
"border":opts.border,
"top":$(this).offset().top,
"left":$(this).offset().left,
"-moz-box-shadow":"0px 0px 12px black",
"-webkit-box-shadow":"0px 0px 12px black",
"z-index":"99"
});
// store all of the old props so it can be animate back
$div.attr("id",opts.useId)
.attr("oldWidth",$(this).width())
.attr("oldHeight",$(this).height())
.attr("oldTop",$(this).offset().top)
.attr("oldLeft",$(this).offset().left)
.attr("oldPadding",$(this).css("padding"));
// put this guy on the page
$("body").prepend($div);
// animate the div outward
$div.animate({
"top":$(this).offset().top-Math.abs($(this).height()-opts.height),
"left":$(this).offset().left-opts.padding,
"height":opts.height,
"padding":opts.padding
},opts.speed);
// loop through each selector and animate it to its css object
for(var eachSelector in opts.selectors){
var selectorObject=opts.selectors[eachSelector];
for(var jquerySelector in selectorObject){
var cssObject=selectorObject[jquerySelector];
$div.find(jquerySelector).animate(cssObject,opts.speed);
}
}
$div.mouseleave(function(){
$("#"+opts.useId).animate({
width:$(this).attr("oldWidth"),
height:$(this).attr("oldHeight"),
top:$(this).attr("oldTop"),
left:$(this).attr("oldLeft"),
padding:$(this).attr("oldPadding")
},0,function(){
$(this).remove();
});
});
});
});
};
$(".productBox").popOut({
height:300,
border:"1px solid #333",
selectors:[{".productDescription":{
height:150
}
}]
});
});
And example HTML code:
<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<img src="/home/ponomar/plakat5.jpg" width="100%">
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;">Buy this!</div>
</div>
</div>
Can anyone help me to do that? besides, I think it is very useful script.
Thanks in advance!!!
This may be what you're looking for : hoverIntent jQuery Plug-in
The best example can be found at Pop Images like Google Images
Also take a look at the demo
If you want to copy the cloned object to your original div then you need to just following the steps:
add id to your original div & the following code above the respective code:
var old_box = $div.attr('id');
$div.attr("id", opts.useId)
.attr("oldWidth", $(this).width())
.attr("oldHeight", $(this).height())
.attr("oldTop", $(this).offset().top)
.attr("oldLeft", $(this).offset().left)
.attr("oldPadding", $(this).css("padding"));
add the following code above the mouseleave event:
$div.click(
function() {
$("#" + old_box).html($(this).html());
$(this).remove();
}
);