Using media.js on CI - javascript

I was still newbie at CI, currently try to make elearning just using one page,
using 2 div on the main body, left and right.
on the left I give just the title and when clicking on the title, the div on the right will show the pdf viewer using media.js from http://github.com/malsup/media/tree/master
But when I tried, the result just show on the next page in full page.
any body could help me or suggest to the right links?
Thanks

Here is a simple PDF viewer for php websites check it out :
http://flexpaper.devaldi.com/

Related

Moving JSFiddle codes to my website

This is probably a very basic question but I'm starting out building a website and I am struggling to move a tablesorter I'm creating on JSFiddle to my website I'm building on Wix.com
On wix you can just add HTML codes, so I'm struggling with the JavaScript codes. All the coding I've done just shows the text and the Java doesn't work.
Any help would really be beneficial.
The link to the tablesorter = jsfiddle.net/tome98/abkNM/5955/
You can add /show after your jsfiddle url and see the code of the page.
In your case :
jsfiddle.net/tome98/abkNM/5955/show/
Right click -> Code of page
More here
Click on [Run] button and in another tab open the jsfiddle.net/draft/ . This will show the latest result without any iframe.

JavaScript navigation

Right so basicly what going on is I have a website I'm trying to build with a ajax navigation so it gets the webpages and loads them into the same page. what the issue is when I put content in normally it works fine but when I try to add content to an external doc and access it from the navigation the boxes split you can see it here http://101.177.243.251/
Does anyone know how to fix this. http://101.177.243.251/ is where it is hosted if you could have a look and see if you could help me.
That gap is from the margin on the first paragraph tag.
The following CSS should fix the issue:
.pageContent {
overflow: hidden;
}

One page layout for a PHP webpage

I want to make a one page layout for my webpage.
And I want to make that so, when i click a button in my navigation bar, it to display a div i've created for my content, but normally is hidden. Also, when i click on the logo of the page, the page goes to it's original state (without the content div showing).
I have no idea how to do this.
I guess your using Javascript and / or PHP for this?
Can you guys give me an example how to do this?
Example: http://www.basjansenmedia.nl/
When you go to themeforest, there's a separate category called One Page themes. Do have a look at it. Or, why not you Google it for yourself? Anyways, a few tutorials would be:
One Page
15 Useful HTML5 Tutorials and Examples For Beginners
Coding a CSS3 & HTML5 One-Page Website Template
Single Page Apps with AngularJS Routing and Templating
Assuming you use jquery
$('#myButton').click(function() {
$('#myNewDiv').show();
$('#myOldDiv').hide();
}
($'#logo').click(function() {
$('#myOldDiv').show();
$('#myNewDiv').hide();
}

Clearbox JS "messages"

I am currently running Clearbox JS on my site so that users may view a larger version of an image once they have visited the images page. Now, I just recently implemented this and I have noticed that on every single page at the top of the page Clearbox JS echos the command that it is doing. Whether it be initializing, or viewing an image, or event rotating an image. I really do not want this message popping up at all. I would much rather being required to put a link somewhere on the website to the developers website then having to deal with this. If anybody knows how to remove this, please answer. I am providing a link to the website so that you know what I am doing as well as a pastebin link to the clearbox.js file which is the config file.
website: www.dsdwebdesign.net/bootstrap_apgnew/index.php
pastebin: http://pastebin.com/NgBgc34X
Try this somewhere in your page, or the cb_style.css file (but make sure you read their conditions, I am not sure if you are allowed to do this with this piece of software):
#CB_OSD{
display:none!important;
}
It should hide the box at the top.

Adding images to a javascript plugin

I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )

Categories

Resources