Website doesn't behave properly offline

Hi everyone,

I have basic knowledge of html. I have been inspecting the design of a website: http://www.merixstudio.com/

I have saved the website to my desktop to examine. When I navigate the website, it won't load the pages, but it shows the site's loading icon in the centre of the screen.

This site is html5 coded and uses PushState ajaxify.

If someone could give me a quick runaround of how these functions work and why the don't work offline I would be very greatful.

Thanks for reading and for your time.

AJAXify won't work on phpBB?

According to PHPBB's website AJAXify is enabled on the software however I can not get it to work at all.

I have followed their insturctions documented on their website here: https://wiki.phpbb.com/Using_AJAX

Here is my code:

<form action="{S_LOGIN_ACTION}" method="post" id="login" data-ajax="true">

I have the latest version of the jQuery library enabled (2.1.1) loaded and jJavaScript enabled.

What could I be doing wrong?

UPDATE

I am running phpBB 3.0.12 (the latest stable release)

Peter

Call Rails helper in every view impliedly as first argument

I have a Rail 4 application that uses the ajaxify_rails Gem. So only my content is loaded but not the full page. Now I have defined a helper method that I want to call in every view as first statement. My current approch is doing this explicit in every view, but this is much duplicated code. So I have many views all starting with

= rails_helper_method
...

Is there a way to to this impliedly on every view, or do I just have to call it over and over again?

Does ajaxify work locally?

Does Ajaxify only work live? That is to say, doesn't it work locally? I’m working on a local site, have a basic implementation and it hasn't changed anything.

Ajaxify shopping cart in volusion

I am working on a template on Volusion, my question is, can the "add to cart" button there be ajaxified?

<div id="custom-buttons">
<div id="custom-cart">
    <a rel='nofollow' href="ShoppingCart.asp">
    <input class="vCSS_input_addtocart" type="image"
    src="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif" 
    name="btnaddtocart" alt="Add to cart" border="0" 
    data-image-path="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif"/>
</a>
</div>

That is the code, the button itself works, but it takes me away from the product page to the cart page, and I would like to avoid that but still add the desired item to cart.

Thank you!

Keep current page visible while loading another page with ajax and css transition

I am using ajax to load next page, it works fine. (wordpress with aws ajaxify plugin )

pastebin of ajax js

All i want now is to keep current page visible till the next page loads and occupy the viewport.

Here is the link for the demo site m working on http://goo.gl/R8sGB5

So when i click on any link, my ajax plugin does the following

prepare the variables

contentSelector = '#' + aws_data['container_id'],
        $content = $(contentSelector),

then it add a fade out transition

$body.ajaxify();

    // Hook into State Changes
    $(window).bind('statechange',function(){
        // Prepare Variables
        var
        State       = History.getState(),
        url         = State.url,
        relativeUrl = url.replace(rootUrl,'');

        // Set Loading
        $body.addClass('loading');

        // Start Fade Out
        // Animating to opacity to 0 still keeps the element's height intact
        // Which prevents that annoying pop bang issue when loading in new content

        if ( '' != aws_data['transition'] ) {
        $content.animate({opacity:0.6},900);

So after this slow fadeout, the plugin request new page with ajax

// Ajax Request the Traditional Page

And the page loads well. Now here i want to have something like the current page is still visible in background and the new page comes in with a slideLeft Transition.

For which i have my slideLeft css class ready .

I am ready to apply the $content.addClass("slideLeft"); but when i do this current page disappears first, and then on the black screen next page comes in..

So how can i achieve that, current page remains visible untill next page comes in slide to left most position ?

The very close prototype of how i want it to be is this https://www.dropbox.com/guide/admin

Thanks

Edit1

According to the suggestion by @vinrav , i altered the code but still when the next page loads, the current page disappears

Here is the pastebin of my altered code

http://pastebin.com/gVFjayDK

line no 122 to 125( fadeout after ajax request )
line no 140 ( adding transition class) 

I guess i'm having issues with correct order, looking for help.

Many Thanks

Activate a function/hyperlink, but stay on the same page

I would like to make "add to cart" button work in a way so that a person stays on the same page once they click on it, but that the items still gets added to their cart. How can I make that? Does it have to be ajaxified, and if yes then how? Here is the button code itself:

<div id="custom-buttons">
<div id="custom-cart">
<a rel='nofollow' href="ShoppingCart.asp">
<input class="vCSS_input_addtocart" type="image"
src="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif" 
name="btnaddtocart" alt="Add to cart" border="0" 
data-image-path="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif"/>
</a>
</div>

Error when use Ajax

I use ajaxify when click a link on pages to not direct. Code:

$("[href], [direct]").bind('click', function(e){
    var a = $(this), url = a.attr('href');
    if (url != undefined && url != null && $("#gMain").attr("handling-reload") == undefined) {
        e.preventDefault();
        $("#gMain").attr("handling-reload", url);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "myURL",
            data: {'url': url},
            success: function (data) {
                if (data['return'] == true) {
                    if (data['direct'] == true) {
                        window.location.href = url;
                    }else {
                        $("#gMain").html(data['html']);
                    }
                }
            }
        }).done(function(){
            $("#gMain").removeAttr("handling-reload");
        });
    }
});

And when complete replace html on pages. When click button (used bind click event) have an error occurred. On tag console I see action of VM{a_number_rand}:xxx (line error) and path of file_js:xxx. Error:

Uncaught SyntaxError: Unexpected end of input

What has happened? I want to use Ajaxify like Facebook. (suggest for me a plugin) :)

Thank you.

Shopify - Currency Toggle has stopped working on my Ajaxify Cart

I added a currency toggle to my Shopify store using this tutorial:

https://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies

Works great however the Ajaxify cart isn't holding onto the currency conversion (non Ajax cart is working fine).

Here's the store:

http://www.honeyhairclub.com/

Anyone know of an easy solution?

Thanks Rich

Wordpress custom last posts PAGINATION

I want to add pagination to my front page last posts but i keep failing..! My code:

                    <?php
                        $recentPosts = new WP_Query();
                        $recentPosts->query('showposts=4&cat=3');
                    ?>
                <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
                    <div id="thepost">
                        <div class="view view-fifth">
                            <?php if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif; ?>
                        <div class="mask">
                            <h2>title</h2>
                            <p><?php echo get_the_date(); ?></p>
                        </div>
                    </div>
                    <p class="posttitle"><a class="ajax" rel='nofollow' href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>"><?php the_title(); ?></a></p>
                    <hr class="hr"/>
                    <p class="postcontent"><?php echo substr(strip_tags($post->post_content), 42, 120);?>...&nbsp;<a class="ajax" rel='nofollow' href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">more...</a></p>
                    </div>
                <?php endwhile; ?>

I have ajaxify my "more..." button so i would like to do the same for the pagination :) Sorry for my bad enlish ...

Converting current function for future elements

Trying to make this (works for first page):

$(".text").not(".active a").hover(function(){

apply to ajaxify loaded elements.

Tried:

 $(document).on("hover",".text:not(.active a)",function(){

Doesn't work.

Am I missing something?

EDIT Let me add that the structure is as follows:

 <ul id="static-bar" class="nav navbar-nav navbar-right">
   <li class="active">
     <div data-hoverLeft="home" class="active-tail-top tail-and-point"></div>
     <div data-hoverLeft="home" class="active-tail-bottom tail-and-point"></div>
     <a id="home" class="text" rel='nofollow' href="index.html">HOME</a>
     <div data-hoverRight="home" class="active-point-top tail-and-point"></div>
     <div data-hoverRight="home" class="active-point-bottom tail-and-point"></div>
   </li>
   <li>
     <div data-hoverLeft="whatWeDo" class="tail-top-gray tail-and-point"></div>
     <div data-hoverLeft="whatWeDo" class="tail-bottom-gray tail-and-point"></div>
     <a id="whatWeDo" class="text" rel='nofollow' href="what-we-do.html">WHAT WE DO</a>
     <div data-hoverRight="whatWeDo" class="point-top-gray tail-and-point"></div>
     <div data-hoverRight="whatWeDo" class="point-bottom-gray tail-and-point"></div
   </li>
 </ul>

The important things to note are that I apply the active class when I'm on that particular page. Regardless, each link gets a tail and point using some CSS border trickery, and the border color of the sibling divs changes when you hover over the a tag. This hover effect doesn't work past the first page when I use the $.hover() method, and not at all when I use $.on().

Why does Ajaxify'ing a standard MVC Razor Web Application result in mobile CSS styles?

Before jumping off the deep end with Ajaxify on a large Razor project, I thought it best to create an MVC4/Razor test-bed app and try it out.

Repro:

1. Created a standard MVC4/Razor Web Application in VS 2012

2. Added the requisite JQuery add-in files (It already has JQuery 1.8.2 by default in the Razor project template).

Added this to BundleConfig.RegisterBundles

bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
            "~/Scripts/jquery-scrollto-{version}.js",
            "~/Scripts/jquery.history-{version}.js",
            "~/Scripts/ajaxify-html5-{version}.js"
            ));

Note: I rename all add-ins to the MS standard ~/scripts/addinname-9.9.9.js format to allow for easier upgrading

Added one line to the bottom of Views/Shared/_Layout.cshtml

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/ajaxify")    <=== ADDED THIS LINE
@RenderSection("scripts", required: false)

When I run the web app the home page comes up normally (as expected), but the contact page comes up using the mobile styles. To verify this I made the body yellow in that media selector and sure enough, it kicks in on the Ajaxified (dynamically loaded) About page:

These CSS styles are defined in the CSS within the following selector:

@media only screen and (max-width: 850px)

The page corrects itself if you resize it at all or refresh the browser:

I am surprised that this is possible, as the media selector is meant to be resolution dependant, so thought I would see if anyone can shed light on the cause. The browser window is greater than 850px at all times so the mobile styles should not be shown at all.

The Actual Question Is:

To avoid further confusion the actual question is: I need to know why the media filter selector is triggering, even though the screen is bigger than the min size specified?

Update:

I reduced the Standard MVC4/Razor CSS mobile styles section to the minimum below and the problem still exists. If I removed the float: none, the problem does not occur:

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
    body{
        background-color: yellow;
    }
    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }
}

Editing Wordpress Ajaxify Theme

I have installed Ajaxify theme on my site (tekstyleankara.com). At the head of the it writes website's name on red background. I want to put the logo of the company there. How can I do that? Thanks. I think I need to edit this line in header.php :

<div class="logo grid_2">
    <h1 class="site-title"><a rel='nofollow' href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>

But I couldn't find out what I should write instead. I made several attempts but they didn't work.

Ajaxify (or just ajax in general) direct URL [closed]

I am using Ajaxify which seems to be the best ajax/history.js combo out there right now (but any other suggestions are welcomed) and all is set up and working as I need. However, there's a slight issue. As you click around the site, the URL changes to match the content, using history.js (so if you click 'About' you get www.mysite.com/about appear in the browser). This works nicely with the back button, but the issue is when you refresh the page at this stage, or go directly to, for example, www.mysite.com/about and you only see the ajax content, not the full site.

What I'd like to do is if the direct URL is visited, the site loads the normal view, then the ajax content that matches the URL is loaded in.

Is this possible or does anyone have any advice?

Thanks, R

Wordpress dropdown menu - ajaxify plugin removes class 'current-menu-item' from menu items. Is there a way around this?

I'm setting up a WP-page for a client. I have a dropdown menu and the primary menu item is an unclickable link that says "MENU". On every subpage, I need the title of the subpage to display where it usually (only on the startpage) says "MENU".

I've been able to accomplish this with this code that my theme support helped me with:

(function($){
  var title = '';
  $('.menu-item').each(function(){
    if( $(this).hasClass('current-menu-item')){
      title = $(this).find('span').text();
    }
  });
  if(title){
   $("#menu-item-36 > a span").text(title);
    console.log(title);
  }
})(jQuery); 

#menu-item-36 is the ID for the primary menu item - "MENU".

The problem is that I also need the pages to load smoothly without reloading the header on every page. So I'm using a plugin called Ajaxify Pro that works great for doing this, BUT Ajaxify removes the class 'current-menu-item' from the active menu item, so my code doesn't work any longer.

Is there a way around this? The active/current menu item in the submenu doesn't get any class different from the other items in the menu, so I'm twisting my head around a way to solve this.

Any help would be much appreciated!

Here you can see the page with Ajaxify activated and the code not working: http://test.frankochrakel.se/