I'm trying to make my first Firefox extension, that replaces the new tab page with a more Chrome-like tab page. one of the features is tiles of your "most visited sites," that you can drag-and-drop to reorder. I have them dragging and dropping, but I have no idea how to save the new locations of the DIVs.
This is the script I'm using:
$(document).ready(function(){
jQuery.fn.redswap = function(options){
var selectedItems=this;
redsettings = jQuery.extend({
speed:"Medium",
opacity:0.7
}, options);
$(selectedItems).mouseover(function(){
$(selectedItems).disableSelection();
$(selectedItems).droppable({
drop: function(event, ui) {
dropindex=$(selectedItems).index(this);
var dragposition=$(selectedItems[dragindex]).position();
var dropposition=$(selectedItems[dropindex]).position();
withDifference=parseInt(dragposition.left)-parseInt(dropposition.left);
heightDifference=parseInt(dragposition.top)-parseInt(dropposition.top);
$(selectedItems[dropindex]).animate({
left:'+='+withDifference,
top:'+='+heightDifference
},redsettings.speed,function(){
});
$(selectedItems[dragindex]).animate({
left:'+='+(withDifference*(-1)),
top:'+='+(heightDifference*(-1))
},redsettings.speed,function(){
//Complete
});
},
});
$(this).draggable({
opacity:redsettings.opacity,
helper: 'clone',
containment: 'parent',
scroll: false,
drag:function(event, ui){
dragindex=$(selectedItems).index(this);
}
});
});
};
});
// Settings
$(document).ready(function(){
$("#wrapper").tabs();
$("div[id*='box']").redswap({
speed:'slow',
opacity:.75
});
});
And this is my HTML:
<div id="1box" class="item">
<a href="http://www.google.com/reader/view"><img src="thumbs/01.png" border="0" />
<h1>Google Reader</a></h1>
</div>
<div id="2box" class="item">
<a href="https://mail.google.com/"><img src="thumbs/02.png" border="0" />
<h1>Gmail</a></h1>
</div>
<div id="3box" class="item">
<a href="http://calendar.google.com/"><img src="thumbs/03.png" border="0" />
<h1>Google Calendar</a></h1>
</div>
<div id="4box" class="item">
<a href="http://www.twitter.com/"><img src="thumbs/04.png" border="0" />
<h1>Twitter</a></h1>
</div>
The HTML isn't final yet, but it does drag and drop. Any idea how I can save the new order of the DIVs, so that when I close out and open it up again, it's the new configuration? If it can't be done with this script, then I'm fine being pointed to a new version.
Keep in mind I'm very very new to JavaScript, so please treat me like I'm an idiot :)
Also, if you're interested in helping me on the coding part of things, send me a message.
It sounds like you're looking for some sort of storage to contain your sequence information.
Three approaches that are applicable to Firefox extensions are discussed in this Stack Overflow question
Either the SQLite or File System option would work well for your application, I think.
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 use Superslides to create an intro. I need that at first the background is white (image 0.jpg) and then when the mouse enters a div change to another image random.
My code is:
HTML
<div id="entra_mouse">
<img src="imagenes/intro/logo.png" alt="" />
<br /><br /><br />
Entrar / Enter
</div>
<div id="slides">
<div class="slides-container">
<img src="imagenes/intro/0.jpg" alt="" />
<img src="imagenes/intro/1.jpg" alt="" id="img_aleatoria" />
</div>
</div>
Javascript
<script>
$(function() {
$('#slides').superslides({
hashchange: false
});
$('#entra_mouse').on('mouseenter', function() {
$('#slides').css('display','inline');
var imagen_aleatoria = Math.round(Math.random()*6);
$("#img_aleatoria").attr("src", "imagenes/intro/'+imagen_aleatoria+'.jpg");
$('#slides').superslides('start');
});
$('#entra_mouse').on('mouseleave', function() {
$('#slides').superslides('stop');
$('#slides').css('display','none');
});
});
</script>
The problem is when the mouse enters ($('#entra_mouse').on('mouseenter', function() {) always show image 1.jpg and not the random.
How I can fix it? =(
Thanks.
Hej!
You can write $('#slides').data('superslides').animate(something).
In my case I have a gallery and when you click on a specific image on get the slide show on a overlay that slides from the top. I get the current index of the thumbnail clicked and animated the slideshow to match with the thumbnail:
$( thumbnail ).click(function() {
var current = $(thumbnail).parent().children('a').index(this);
$('#slides').data('superslides').animate(current);
});
Although I have to say that is not ideal, since I would like to go to a specific slide without animating the action. I haven't find a way to do so.
I hope that helps you! Good Luck!
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 two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image).
I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
I assume that you are using this library. Is this the case?
In my demo i copied your code and currently
it toggles the images.
Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
The call to elevateZoom is not working for me. Are you missing a reference?
If you are using elevateZoom than you have to provide the URL for the larger Image
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
And the matching javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Please ask additional questions or comment if i misunderstood you.
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();
}
);