call a page or content with javascript

38 Posts

sironder Reply #1, 13 years, 7 months ago

hi every body,

I just started on Modx and I want to understand the functioning how the pages were called.
Specifically, I currently trying to integrate a template where the menu is done by javascript. Here is the code that displays the menu and call the associated pages :

	
<div class="clearboth"></div>          
                    <!-- Menu -->
                                <script type="text/javascript">                  
                                        myButton('HOME','_home.htm');
                                        myButton('ABOUT US','_about.htm');
                                        myButton('SERVICES','_services.htm');
                                        myButton('SOLUTIONS','_solutions.htm');
                                        myButton('CONTACT US','_contact.htm');
                                </script>
</div>

here the function myButton :

function myButton (buttonText,buttonLink) {
    if (!online && !isIE) {
  document.write('  <DIV ID="flashMovie'+(anim_ids+1)+'" STYLE="width: 200; height: 31; z-index: 100;" onClick="showPage(\''+buttonLink+'\','+anim_ids+1+')">');                                                                                                     
    }      
    AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','width','200','height','31','src','flash/button','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/button','flashvars','custom_xml_url=button.xml&item_text='+buttonText+'&item_url='+buttonLink+'&button_id='+(anim_ids+1)+'&isIE='+isIE,'scale','noScale','wmode','transparent');
    if (!online && !isIE) {
    document.write('</DIV>');
    }  
}

on the other hand I created my differents pages in modx (home, about, services, solutions, contact).
The problem is that I can not call modx pages ...
anyone know how can i do that? in the function myButton, do I replace the current buttonLink (html page)? by what ?

Thank you in advance ..

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #2, 13 years, 7 months ago

What happens when you actually click on one of these dynamically generated buttons?

There are a whole host of potential problems :

FURLS are setup correctly
URLS are formed correctly
Might not be triggering because content is added after the dom is loaded

Maybe start by explaining to us why you are doing your menu this way, as it might give us a better understanding.

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook

38 Posts

sironder Reply #3, 13 years, 7 months ago

Quote from: gelstudios at Mar 07, 2013, 07:56 AM

What happens when you actually click on one of these dynamically generated buttons?

There are a whole host of potential problems :

FURLS are setup correctly

URLS are formed correctly

Might not be triggering because content is added after the dom is loaded

Maybe start by explaining to us why you are doing your menu this way, as it might give us a better understanding.

I do my menu in this way because i use a template ()http://www.kitsgratuits.com/kit-gratuit/template7. The function call an existing page but I want to call the page that I created in Modx and I don't know how can i do that.

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #4, 13 years, 7 months ago

Its just a simple case of making your page in MODX, making sure there is no template assigned to it so its just plain text/html, opening/viewing the resource to get its URL the overwriting each of the elements.

 myButton('HOME','new url here');

By the looks of it the flash goes off and does some page fetching and loads it into the content, thus inheriting styles.

I have done something similar using jquery's load method here :

http://www.mikegarlick.com/

(Click on any of the top level menu items and it all loads "in page" without redirection)

However this method allows you to style each page, and also handles the fact that the user might not always land on the home page...

Are you competent in jquery? As that whole flash site could be made in jquery in just a few hours, with the animations - and increase browser compatibility ten fold also.

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook

151 Posts

Eric SWD Reply #5, 13 years, 7 months ago

I have done something similar using jquery's load method here :

http://www.mikegarlick.com/

Love that functionality! Nice touch, really classy.

MODX...the Zen of CMS
"Bight off more than you can chew and keep right on chewing."

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #6, 13 years, 7 months ago

Quote from: eric.swd at Mar 08, 2013, 02:03 AM

Love that functionality! Nice touch, really classy.

Thanks Eric! My new site is going to use this method too

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook

38 Posts

sironder Reply #7, 13 years, 7 months ago

How can I get the new url ? Where is located the page that I created with ModX ?
to resume, I must replace

myButton('HOME','_home.htm');

by

myButton('HOME','location of my modx page');

?

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #8, 13 years, 7 months ago

In the resource tree, right click on the page you created and click view resource, this will open the page in a new browser window. Copy that URL and paste it into the code above as your described.

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook

38 Posts

sironder Reply #9, 13 years, 7 months ago

Ok thank you very much !!!

the url is http://192.168.110.27/index.php?id=1, it works but when I paste it into my code and click to menu it open a new page, in other menu a new page again. How can i fixe that ?

More, when I want to change page, javascript must slide up (to close) and slide down (to open) a page. This is the code which make that :

hideContent = function(contentString,transition){
		if (transition==null) {
					jQuery("div.dynamicContent").fadeOut( 1000 ,function() {
					showContent(contentString);playSound(0);
					});
		} else {
					jQuery("div.dynamicContent").slideUp( 1000 ,function() {
					showContent(contentString);playSound(0);
					});
	  }

	};

	
	showContent = function (contentString) {
		jQuery.ajax({
			   type: "GET",
			   url: contentString,
			   dataType:"html",
			   success: function(data){
			    jQuery("div.dynamicContent").html(data);
			 		jQuery("div.dynamicContent").slideDown(1000);
				},
			   error: function () {
			   		alert("Page "+contentString+" not found");
			   	}
 		});
function showPage(pageURL,button_id) {
    if (pageURL.substring(0,4).toLowerCase()=='http') {
        window.open(pageURL, '_blank');
        return;
    };
    hideContent(pageURL,'slideUp');
    if (selected_button!="" && button_id!=selected_button) {
            sendToASUnselectButton('anim_'+selected_button);        
    }
    if (button_id!=undefined) {selected_button = button_id;}
}

main.js in attachement

Do you think it is possible to adapt this effect to my modx pages ?

thank you again ... wink

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #10, 13 years, 7 months ago

Yes, this is 100% possible. Ive taken your code and cleaned it up a bit, and commented where and why its opening in a new window.

Please remember, clean code really does, help the world go round. (Seriously, it does)

function hideContent (contentString,transition){
    if (transition==null) {
        $("div.dynamicContent").fadeOut( 1000 ,function() {
            showContent(contentString);
            playSound(0);
        });
    } else {
        $("div.dynamicContent").slideUp( 1000 ,function() {
            showContent(contentString);
            playSound(0);
        });
    } 
}
   
function showContent (contentString) {
    $.ajax({
        type: "GET",
        url: contentString,
        dataType:"html",
        success: function(data){
            $("div.dynamicContent").html(data);
            $("div.dynamicContent").slideDown(1000);
        },
        error: function () {
            alert("Page "+contentString+" not found");
        }
    });
}

function showPage(pageURL,button_id) {
    if (pageURL.substring(0,4).toLowerCase()=='http') {
        //The '_blank' attribute is making it open in a new tab.
        window.open(pageURL, '_blank');
        return;
    };
    
    hideContent(pageURL,'slideUp');
    
    if (selected_button!="" && button_id!=selected_button) {
            sendToASUnselectButton('anim_'+selected_button);        
    }
    
    if (button_id!=undefined) {selected_button = button_id;}
}

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook