This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How can i make something like this?

Open 17 replies generalpremium
Mike V
11 years ago · Last reply by Andrew Misplon 11 years ago

Hi, i would like to create something like this library on this page
http://www.notebookcheck.net/Computer-Games-on-Laptop-Graphic-Cards.13849.0.html

But i wonder if its done by excell imported to html, or custom plugin for wordpress for creating tables like Tablepress or etc. Can you tell what method, plugin or system is used to create someting like this type of library? That will be great. I am trying to do something different, but i need all and similar features that are on that page.
I am using Vantage premium.

Thank you

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

17
  1. Andrew Misplon Staff 11 years, 17 days ago

    Hi Mike

    Embedding a spreadsheet from Google Docs is one way to go. When you make changes on Google Docs it updates on your site.

    http://en.support.wordpress.com/google-docs/#spreadsheets

  2. Mike V 11 years, 10 days ago

    hi i did as you said and went through it and learned the whole proces.. at the end i realized i cannot use filters on published files and i did proper research. Now i returned to excell.
    I am using excel online and i want to embed excel file to my website.. i did it easily using ipframe code, but i want to use additional JAVA code that you can customize more. This both codes are provided from microsoft generating the embeding code.

    My question is how can i put that code into action? its a long code and i tryied in wordpress pasting it to text editor, but nothing happened.. Is there something i am doing wrong.. also what wordek for me was to create an .htm file with that code inside, and then i was able to put in on my website, but the problem was that i had to click on the file that opened in seperated window. I achieved that by adding a media … so i add that htm and it was ok. I just want that when i open my page it will show that file directly without clicking on it taking me to different link…
    Do you know what can i do and how to use that java code directly?
    It will be a great help. Thanks

  3. Andrew Misplon Staff 11 years, 10 days ago

    Ahh right..pity, the embedded Google option would have been easy if it had what you needed.

    Ok so two thoughts here:

    1. Can you send me a link so I can see what the code looks like that Microsoft wants you to insert? I’ll then try advise from there.

    2. Another option we haven’t discussed is you could potentially set this all up on a static html page, we could then use an iFrame to embed that static page.

  4. Mike V 11 years, 10 days ago

    Yes, thats an great idea i need to do that just like you said, you will save me with that.

    Here is the code ………………………………………..

    /* * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the * Excel Web App into a div with id=myExcelDiv. The full API is documented at * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get * values from your Excel file and how to use the rest of the object model. */

    // Use this file token to reference LIBRARY FPS ready.xlsx in Excel’s APIs var fileToken = “SD3440908D2E5FBF61!184/3765168224524549985/t=0&s=0&v=!ABxWuvKqKuSpyWU”;

    // run the Excel load handler on page load if (window.attachEvent) { window.attachEvent(“onload”, loadEwaOnPageLoad); } else { window.addEventListener(“DOMContentLoaded”, loadEwaOnPageLoad, false); }

    function loadEwaOnPageLoad() { var props = { item: “‘Sheet1’!B2:AN55”, uiOptions: { showDownloadButton: false, showGridlines: false }, interactivityOptions: { allowTypingAndFormulaEntry: false } };

    Ewa.EwaControl.loadEwaAsync(fileToken, “myExcelDiv”, props, onEwaLoaded); }

    function onEwaLoaded(result) { /* * Add code here to interact with the embedded Excel web app. * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx. */ }

    …………………………………………………………………………

    Please let me know, i am on whole day and i do have it work a bit, look at this link, it works as i want but i have to click on x5.. i want it to be open directly without clicking on the file:

    http://www.g-laptops.com/gpu-library/

    have a look on link above

    Thank you for early response

  5. Mike V 11 years, 10 days ago

    one more time, it was uploaded not good

    Here is the code
    ………………………………………..

    /*
    * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
    * Excel Web App into a div with id=myExcelDiv. The full API is documented at
    * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get
    * values from your Excel file and how to use the rest of the object model.
    */

    // Use this file token to reference LIBRARY FPS ready.xlsx in Excel’s APIs
    var fileToken = “SD3440908D2E5FBF61!184/3765168224524549985/t=0&s=0&v=!ABxWuvKqKuSpyWU”;

    // run the Excel load handler on page load
    if (window.attachEvent) {
    window.attachEvent(“onload”, loadEwaOnPageLoad);
    } else {
    window.addEventListener(“DOMContentLoaded”, loadEwaOnPageLoad, false);
    }

    function loadEwaOnPageLoad() {
    var props = {
    item: “‘Sheet1’!B2:AN55”,
    uiOptions: {
    showDownloadButton: false,
    showGridlines: false
    },
    interactivityOptions: {
    allowTypingAndFormulaEntry: false
    }
    };

    Ewa.EwaControl.loadEwaAsync(fileToken, “myExcelDiv”, props, onEwaLoaded);
    }

    function onEwaLoaded(result) {
    /*
    * Add code here to interact with the embedded Excel web app.
    * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx.
    */
    }

    …………………………………………………………………………

  6. Mike V 11 years, 10 days ago

    lol its not showing the code properly, is there a way i can send it to you?

  7. Mike V 11 years, 10 days ago 
     <div id="myExcelDiv" style="width: 1920px; height: 1080px"></div>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
	/*
	 * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
	 * Excel Web App into a div with id=myExcelDiv. The full API is documented at
	 * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get
	 * values from your Excel file and how to use the rest of the object model. 
	 */

	// Use this file token to reference LIBRARY FPS ready.xlsx in Excel's APIs
	var fileToken = "SD3440908D2E5FBF61!184/3765168224524549985/t=0&s=0&v=!ABxWuvKqKuSpyWU";

	// run the Excel load handler on page load
	if (window.attachEvent) {
		window.attachEvent("onload", loadEwaOnPageLoad);
	} else {
		window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
	}

	function loadEwaOnPageLoad() {
		var props = {
			item: "'Sheet1'!B2:AN55",
			uiOptions: {
				showDownloadButton: false,
				showGridlines: false
			},
			interactivityOptions: {
				allowTypingAndFormulaEntry: false
			}
		};

		Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
	}

	function onEwaLoaded(result) {
		/*
		 * Add code here to interact with the embedded Excel web app.
		 * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx.
		 */
	}
</script>

    tags.

  8. Mike V 11 years, 10 days ago

    hah i did it :) sorry for the earler ones, you can delete them

  9. Mike V 11 years, 10 days ago

    i mean, i did post the code, i am still trying to find out how to do it like you said to set this all up on a static html page, and then use an iFrame to embed that static page. I am using Excel 2013 online
    Thank you

  10. Andrew Misplon Staff 11 years, 9 days ago

    Thanks for the info. There might be better ways of going this. My iFrame hack solution was to create a static page, call it what you’d like and upload it to the root of your server, here is how it might look:

    <html>
<head>
</head>
<body>
 <div id="myExcelDiv" style="width: 1920px; height: 1080px"></div>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
    /*
     * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
     * Excel Web App into a div with id=myExcelDiv. The full API is documented at
     * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get
     * values from your Excel file and how to use the rest of the object model. 
     */

    // Use this file token to reference LIBRARY FPS ready.xlsx in Excel's APIs
    var fileToken = "SD3440908D2E5FBF61!184/3765168224524549985/t=0&s=0&v=!ABxWuvKqKuSpyWU";

    // run the Excel load handler on page load
    if (window.attachEvent) {
        window.attachEvent("onload", loadEwaOnPageLoad);
    } else {
        window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
    }

    function loadEwaOnPageLoad() {
        var props = {
            item: "'Sheet1'!B2:AN55",
            uiOptions: {
                showDownloadButton: false,
                showGridlines: false
            },
            interactivityOptions: {
                allowTypingAndFormulaEntry: false
            }
        };

        Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
    }

    function onEwaLoaded(result) {
        /*
         * Add code here to interact with the embedded Excel web app.
         * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx.
         */
    }
</script> 
</body>
</html>

    Then in your WordPress page, embed that static page:

    <iframe src="http://www.w3schools.com"></iframe>

    Ref: http://www.w3schools.com/tags/tag_iframe.asp

  11. Andrew Misplon Staff 11 years, 9 days ago

    Another option is outlined here:

    http://en.support.wordpress.com/excel-web-app/

  12. Mike V 11 years, 9 days ago

    hi Andrew thank you it worked.. but last question.. first have a look at it
    http://www.g-laptops.com/library-x/

    Is it possible to be stretched on the whole page? i mean how can i expand
    the iframe size? because i stretched it in visual editor to 2000×1800
    pixels to be stretched and remove the moving lines around the ipframe. is
    there a code for iframe to be as big as i want. I am on 1366resolution on
    my laptop and it looks realy sqeezed and document exist inside in 1920×1080.

    Otherwise nice one, i will use this trick in similar things :)

  13. Andrew Misplon Staff 11 years, 8 days ago

    Glad to see you’re making progress. Try the following under Appearance > Custom CSS:

    /* Library */

.page-id-679 .site-main .full-container {
max-width: 100% !important;
}

#respond {
margin-right: auto;
margin-left: auto;
max-width: 1080px;
}
  14. Mike V 11 years, 8 days ago

    Hi andrew, i didn’t realy get it.. that /* Library */ line i have to write there name of my library or how did you mean it? anyways i am pretty happy with results. for last time check that LIBRARY-x page i sended before, i tryed the code, it moved down, but no to the side as i wanted. Thank you for your help, i will keep that work i have :) i can consider this theme Resolved . You can close it :) Thank you againg, you’r great guys

  15. Andrew Misplon Staff 11 years, 7 days ago

    Sorry about that, I should have clarified.

    /* This is a CSS comment, it doesn't do anything, we just use it for organising and labelling, you can make it whatever you'd like */

    Glad to hear you made progress. Let us know if you run into any further challenges.

  16. Andrew Misplon Staff 11 years, 7 days ago

    So to confirm, /* Library /* is just a label, it isn’t functional.

  17. Andrew Misplon Staff 11 years, 7 days ago

    The reason I said the following:

    #respond {
margin-right: auto;
margin-left: auto;
max-width: 1080px;
}

    Was to center your comments fields. I’m not sure about the big margins you added to that. Perhaps re-consider. If you want the comment field left aligned just removed the margin-left and margin-right lines completely, leaving only the max-width line.

    The max-width is working so the iframe isn’t constrained anymore.

    Feel free to let me know if you want help with any further changes here.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread