Javascript / css photo pop-up feature placement issues - javascript

I've used this site many times to find answers to my questions, but I can't seem to find an answer to my current issue. Any help would be great!
I'm using a custom photo pop-up feature add-on in Magento called TopUp. I contacted the original writer of the code and have not received a response. I Googled the issue and other users with Magento 1.6 and 1.7 are having the same issue.
When you click on a product image when viewing a product details page, the image should popup in the middle of the screen. Well, right now, the image pops up toward the bottom of the screen and when you click next or back, it re-positions itself further down.
Here's an exact link to a product where this applies (development site):
http://www.childress-media.com/shapingheartsforgod.org/index.php/shaping-hearts-series/pre-k-through-5th-grade/all-things-made-new/all-things-made-new-student-workbook-level-1.html
Here's the link to the Javascript pop-up program:
http://www.childress-media.com/shapingheartsforgod.org/skin/frontend/base/default/js/top_up/top_up-min.js
I've tried messing around with the CSS here and there within the file - but I can't make it do what I want.
Ideally, the pop-up would appear 100px from the top of the page and be centered and stay centered when you press next or previous.
Any help you guys can provide would be much appreciated. Thanks!

An easy, but raw way to do this is setting a css style, like:
document.getElementById('top_up').style.top = '100px';

Related

Menu closes when you scroll down on mobile device

I am currently trying to make the new website for my school but I am having some problems with the responsive menu. Basically when I open the menu on a mobile device some of the links do not appear on the page as there are too many. When I try to scroll down through the list of links the menu just closes. I don't know what to do to solve the problem cos I've got no idea what's even causing it. Please help!
Any ideas?
You can see the page here
First Change the script order in your website. Jquery should be at top of all the remaining scripts. In your website it's different. See the below image.
and at the same time you are using ksmenu.js twice.
And for the issue you are asking is there is a script to hide menu on resize. Please see the below image.

Images not loading when using jQuery .html apending

Me and the team have been a bit stumped on this so I'm hoping someone has come across this problem before.
I have a notification div that flies in depending on some event calls. The script I have seems to be working everywhere except one application where the images won't load. Both the icon css background image and the actual loading indicator won't show if the container is dynamically appended.
If i remove the initial display:none property the images load, but once the trigger is called they don't.
Unfortunately the application is on an internal network and I can't share a link, but I've included a screen shot and a jsfiddle to the code I'm using. (which in it's self is doing exactly what it's supposed to)
http://jsfiddle.net/FSshV/7/
It's a heavy js based app with some ASP.NET 2.0 here and there and some ajax calls bouncing around but doesn't seem to be giving any errors and i haven't been able to pinpoint the problem.
I know it's a long shot and not much to go on but maybe someone hit that wall before :)
I'm curious if anyone has seen a similar problem before and can share some insight?
PS: yes I've checked if the image paths are correct, and they are ^.^

Jquery Mobile weird space appears when I click blank areas

This is my first time doodling with jquery-mobile. I designed a theme, and now I'm trying to implement it...
Things aren't going as smooth as expected, while I've good understanding of jquery/javascript in general, I really don't like working with frameworks with their quirks and specific syntax.
Anyhow, please check: http://mac.idev.ge:800/html5-mobile/iradio.html
Problem:
Try to click in the area of the player, on the album cover for example, notice how blank space appears on the top of lyrics area? What is that? Same happens if you click near song title..
This is baffling...
Any ideas how to fix this unwanted behaviour? And what is it?
Add this attribute to your header/content div
data-tap-toggle="false"
There are a couple of questions related to this problem:
Jquery mobile: Disable "tap to toggle" fixed header and footer
How to fix jQuery Mobile's fixed footer?
They seem to depend on which version you are using but give them a try

Weird block of div just outside viewport in Chrome

First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?

How do I create a content area (image gallery) that scrolls on mouseOver

I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php

Categories

Resources