Search jQuery

jQuery Forum

Screen name:
gaszpp

gaszpp's Profile

4 Posts

12 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Anchor link to different page not working (jumping back to top on load)
[10Replies]
- 10-Jul-2015 07:52 AM
- Forum: Using jQuery
Hello there! Been a while since I last came here, and as always I bring you a fine conundrum today:

Pretty simple:

Buttons on index.html links to specific parts of a different page through anchor id's. Problem is that while it is loading the new page, it always goes to the top of it rather than the point where I want it to go.

For some reason every time I do a fresh reload of the page, it does go to the anchor on load but only for a second before jumping back to the top of the page. Like something is forcing the default position of the page.

http://grupo-wm.com/
1. <div class="col-md-3 images_1_of_4 text-center">
2. <span class="bg2"><i class="fa fa-cog"></i></span>
3. <h5><a href="#">TURIAGRO</a></h5>
4. <p class="para">A Turiagro nasce da paixão do Empresário Angolano Rogério Martins Leonardo pelas questões agrícolas à cerca de 3 anos. É uma das empresas mais recentes do Grupo WM, mas também é das mais dinâmicas.</p>
5. <div class="col_space2"></div>
6. <a href="empresas.html#turiagro" class="fa-btn btn-1 btn-1e">+ INFO</a>
7. </div>
8. (...)
http://grupo-wm.com/empresas.html
1. <div class="main row">
2. <div class="col-md-6 content_left">
3. <img src="web/images/pic-turiagro.png" alt="" class="img-responsive"></div>
4. <div class="col-md-6 content_right">
5. <div id="turiagro"></div>
6. <h2>TURIAGRO</h2>
7. <p class="para">A Turiagro nasce da paixão do Empresário Angolano Rogério Martins Leonardo pelas questões agrícolas à cerca de 3 anos. É uma das empresas mais recentes do
8. (...)
I've looked far and wide for a fix and I have found posts with the same problem, but all attempts at fixing it through different methods haven't done anything at all.

For now at least, I am not actively using jQuery to make this link between pages as you can see, but I'm guessing that I can fix my problem with it. Or maybe it is just an html/css thing? Honestly I can't tell.

Thank you in advance!

Script (jScrollbar plugin) only works after reloading page
[8Replies]
- 31-Oct-2013 03:19 PM
- Forum: Using jQuery
I've already searched similar problems and solutions, but nothing seems to fix what troubles me, so hopefully some of you can help me out.
As the title says, what I think it is happening is that a specific script doesn't run when I open the page for the first time, but after refreshing it works as intended. And this only happens if I select and press ENTER on the link, instead of pressing F5. With F5 the scrollbar doest appear at all after refreshing for some reason.
The script is a jquery plugin named jScrollbar, In there it explains how it works and how it is implemented, but it is fairly simple.

Here is the site: gaspargaspar.com

Everything else seems to work just fine, the page's own jquery and the lightbox start with no problems on the first go. It is rather simple, just some buttons that fade in and out content from the page.

I've already tried a bunch of things like changing the order of the embed of the scripts, the scripts themselves, trying different versions of jquery, but nothing seems to fix this completely.
Considering my tests so far, I'm betting the problem is the script embedding that is causing all of this, but I can't be sure.
Upon using the "inspect element" feature on Chrome, what seems to happen is that the div that houses the scrollbar (.jScrollbar_draggable), while it appears on the code, it doesn't seem to be instantiated on the page (no blue shade around it when selected).
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta name="keywords" content="gaspar, nogueira, quaresma, design, graphic, (....) " />
5. <meta name="description" content="graphic and multimedia design portfolio" />
6. <meta http-equiv="content-language" content="en">
7. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
8. <meta name="author" content="Gaspar Nogueira Quaresma">
9. <meta name="reply-to" content="gaspar@gaspargaspar.com">
10. <meta name="generator" content="Adobe Dreamweaver CS5.5">
11. <title>portoflio / Gaspar Nogueira Quaresma</title>
13. <link href="css/pixelCSS.css" rel="stylesheet" type="text/css">
14. <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
15. <script type="text/javascript" src="js/pixelJAVA.js"> </script>
17. <link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
19. 
20. <link rel="stylesheet" href="jquery/jScrollbar.jquery.css" type="text/css" />
21. <script type="text/javascript" src="jquery/jquery.js"></script>
22. <script type="text/javascript" src="jquery/jquery-ui.js"></script>
23. <script type="text/javascript" src="jquery/jquery-mousewheel.js"></script>
24. <script type="text/javascript" src="jquery/jScrollbar.jquery.min.js"></script>
25. 
27. 
28. 
29. <link rel="stylesheet" href="CSS/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
30. <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
31. 
33. </head>
34. <body>
35. (...)
And the main javascript file, pixelJAVA.js:
1. $(document).ready(function(){
3. $('.jScrollbar1, .jScrollbar2, .jScrollbar3, .jScrollbar4, .jScrollbar5').jScrollbar();
4. $("a[rel^='prettyPhoto']").prettyPhoto();
6. $("#main").fadeOut(0);
7. $("#main").fadeIn(4500);
9. (.....)
10. (all the stuff related to the buttons, animations, and so on...)
Honestly, if I knew it was going to be this hard to get this supposedly simple plugin to work, I wouldn't have ever used it. Stranger even is how I got this to work on a similar one page website not so long ago, but on this one it just doesn't, no matter how hard I try.

Resize web page based on user's screen resolution
[0Replies]
- 17-Dec-2012 10:13 AM
- Forum: Using jQuery
For reference the page is formatted somewhat like so:
(also, I'm already using a lot of CSS and jquery functions.)

<body>

<div id="wrapper">
//wrapper div used to center the main div on the absolute center of the browser window

          <div id="main">

                  (in the main div is all the content of the web in a bunch of divs)

          </div>
</div>
</body>
As the title implies, the only thing I'm trying to work around here is to resize the entire site depending on the screen resolution of the user. (Larger resolution = larger main div) and vice versa.
Because the graphic style of the site is pixel art, I'm afraid that on bigger screens with a larger resolution the 999px by 640px main div isn't enough, losing detail.

I'm not sure if this is something that should be fixed through CSS or some kind of function started on load, but that's why I'm are asking you all!

Ligthbox crashing website (prettyPhoto)
[5Replies]
- 19-Jun-2012 04:09 PM
- Forum: Using jQuery
And today I bring you a brand new problem, a day before deadline. Wonderful, right!?

So here is the thing:

- I have a function that I want to endlessly loop over, from opening the website to closing it.

At first I thought about making a while cycle, but then a teacher said for me to just call the name of said function on the end of it, like so:

(simplified version. The one I'm using as more 2 sets of variables and animates, the only difference being their names)
1. $(document).ready(function(){
2. cloud_scroll();
3. });
5. function cloud_scroll(){
7. var x3 = Math.floor(Math.random() * (200000 - 150000 + 1)) + 150000;
8. var y3 = Math.floor(Math.random() * 60);
9. var d3 = Math.floor(Math.random() * (120000 - 100000 + 1)) + 100000;
11. $("#cloud3").css({"top": y3 + "px"});
12. $("#cloud3").delay(d3).animate({"left":"+=1300"}, (x3))
  .animate({"left":"-=1300", "top": y3}, (0));
14. cloud_scroll();
15. }
The problem is, while this worked at my schools computer's in Firefox, once I tried it at home, it completely crashes the browser (again, Firefox). It also seems to work fine on Chrome and IE, so I'm guessing it is because of this specific newer version of Firefox I own, since the one at school is older.

As for the function itself, I think that, for now at least, it is pretty solid. Haven't had a problem with it after tuning certain things.

What am I missing?

EDIT: actually, I just realized that while it doesn't show any errors and opens under the circumstances I said earlier, it does screw up the code that was placed bellow the one I posted on the JS file. The initiation for the lightbox function I had stopped working.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend