The innerHTML property can be used to modify your document's HTML on the fly.
When you use innerHTML, you can change the page's
content without refreshing the page. This can make your website feel
quicker and more responsive to user input.
The innerHTML property is used along with getElementById within your JavaScript code to refer to an HTML element and change its contents.
The innerHTML property is not actually part of the
official DOM specification. Despite this, it is supported in all major
browsers, and has had widespread use across the web for many years. DOM,
which stands for Document Object Model, is the hierarchy that you can
use to access and manipulate HTML objects from within your JavaScript.
The innerHTML Syntax
The syntax for using innerHTML goes like this:
document.getElementById('{ID of element}').innerHTML = '{content}';
In this syntax example, {ID of element} is the ID of an HTML element and {content} is the new content to go into the element.
Basic innerHTML Example
Here's a basic example to demonstrate how innerHTML works.
This code includes two functions and two buttons. Each function
displays a different message and each button triggers a different
function.
In the functions, the getElementById refers to the HTML element by using its ID. We give the HTML element an ID of "myText" using id="myText".
So in the first function for example, you can see that document.getElementById('myText').innerHTML = 'Thanks!'; is setting the innerHTML of the "myText" element to "Thanks!".
Here's an example of using innerHTML with a text field. Here, we display whatever the user has entered into the input field.
Code:
<script type="text/javascript">
function showMsg(){
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = userInput;
}
</script>
<input type="input" maxlength="40" id="userInput"
onkeyup="showMsg()" value="Enter text here..." />
<p id="userMsg"></p>
Example 3: Formatting with getElementById
In this example, we use the getElementById property to detect the color that the user has selected. We can then use style.color to apply the new color. In both cases, we refer to the HTML elements by their ID (using getElementById.)
Code:
<script type="text/javascript">
function changeColor(){
var newColor = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.color = newColor;
}
</script>
<p id="colorMsg">Choose a color...</p>
<select id="colorPicker" onchange="JavaScript:changeColor()">
<option value="#000000">Black</option>
<option value="#000099">Blue</option>
<option value="#990000">Red</option>
<option value="#009900">Green</option>
</select>
Well it depends on the Linux distribution you are using, the version of php and the way you install it with Apache web server. Php.ini may be here:
/etc/php.ini
Or here:
/etc/php/php.ini
/etc/php5/php.ini
Or here:
/usr/bin/php5/bin/php.ini
Anyway, you can always find any file named php.ini in this manner
find / -name php.ini
The simplest yet most powerful usage of the renowned find command.
By its help I was able to locate the php.ini on my Ubuntu 9.04 Apache2 and PHP5:
This tutorial will explain how to install XAMPP 1.7.1 in Ubuntu 9.10
Introduction
This is a step by step guide for installing and setting up a webdev server on a ubuntu machine. I will show you how to install the lampp stack using XAMPP version 1.7.1 on Ubuntu 9.10.
Part 1: Install XAMPP:
1. For starters you need to go to the official XAMPP website and download XAMPP for Linux version 1.7.4, click here to download.
2. Place the downloaded .tar.gz archive on your desktop if it wasn’t already saved there by default.
3. Open a terminal ( Applications > Accessoires > Terminal )
4. Go to your desktop (or any other location where you placed the downloaded file)
cd Dekstop
5. Login as the super admin
sudo -s
6. Untarball the compressed file to the /opt directory
tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt
The above command installs xampp in the /opt/lampp directory
Step 2: Solve "htdocs" Permission Problem
After install xampp when you try to paste anything to htdocs you will get permission denied error. Therefore to fix this you have to run the following code in terminal after running the code you can simply put files and folder into htdocs
sudo chmod 777 -R /opt/lampp/htdocs/
This changes the ownership of the htdocs folder to your user, the -R option makes the command recursive so all permissions of folders and files inside htdocs are changed aswell.
Step 3: How to Start / Stop xampp
7.Start xampp by giving the command
/opt/lampp/lampp start
Note:If it sounds like, "XAMPP: Another web server daemon is already running."
to solve tat use any one of following code
stopapache
or
sudo /etc/init.d/apache2 stop
or
sudo /usr/sbin/apache2ctl stop
Check any other installed apache server ?
sudo ps -u apache
or
sudo ps -u nobody
To see a list of processes owned by the usual apache owners.
If it's the xampp apache running then it doesn't matter, leave it running.
Or stop all the servers and then try starting them agai
8. After starting xampp open a browserwindow and go to localhost
If all went well you’ll see this page
9. After choosing your language you’ll be forwarded to the welcome page
Step 4: Securing xampp
10. Go to the security page by clicking Security in the left menu.
You’ll see that everything is unsecured at the moment
When XAMPP will be used for local development these settings won’t matter much. It is good practice however to set it up securely.
Next I’ll show you how to setup security
11. Copy the code on the bottom of the security page and then paste it into a terminal
/opt/lampp/lampp security
This will start an interactive program to help you configure security settings
Make sure you’re logged in as super admin to start xampp or you’ll get an error message!
12. Type yes when prompted to enter a password and enter a secure password twice
13. Turn off MySQL network accesibility by entering yes, MySQL will now restart so the setting can take effect
14. You’ll be prompted to set a password for phpMyAdmin, do so.
15. And again for setting a MySQL root password, make sure you write this one down or you’ll be in trouble later on.
16. Now set a password for user nobody.
This should complete the security setup procedure.
To confirm everything went ok, open a browserwindow and go to localhost
17. You’ll be prompted for a username and password.
the username is ‘lampp’
the password is the one you entered in step 12
18. Go the the security pages
This should show all subjects are now secured..
Place content you want to add to the webserver in the root web directory located in
/opt/lamp/htdocs
To make things easier we’ll add a link to the htdocs folder to a folder in our home directory.
You can do this in a terminal by typing
mkdir ~/public_html
Or just right-click in your home folder and create a new folder named ‘public_html’
19. Now we’ll make a link from the new folder to /opt/lampp/htdocs , open a terminal and enter
sudo ln -s ~/public_html /opt/lampp/htdocs/
20. To setup permissions for the htdocs folder, go to the terminal (still logged in as super user) and type
chown yourusername -R /opt/lampp/htdocs
This changes the ownership of the htdocs folder to your user, the -R option makes the command recursive so all permissions of folders and files inside htdocs are changed aswell.
Note that depending on the applications used to interact with content on your server, permissions might need to be altered to grant read/write access.
Congratulations that was it! Well sort of…
After restarting your computer you have to manually start the server by entering
/opt/lampp/lampp start
in a terminal.
EDIT: MiD-AwE pointed out he had to install the ia32 libraries when installing XAMPP on Ubuntu 9.10 64-bit. The ia32 library is needed when installing a 64-bit version on a AMD64 or ia64-system.
To do this open a terminal and type
sudo apt-get install ia32-libs
If you want xampp to automatically start at boottime, follow these steps.
EDIT : Or as MiD-AwE suggested you can go to System > Preferences and add an entry
/opt/lampp/lampp start
to “Startup Applications”
If you want to use a GUI to start and stop xampp do the following:
[Desktop Entry]
Comment=Start and Stop XAMPP
Name=XAMPP Control Panel
Exec=gksudo python /opt/lampp/share/xampp-control-panel/xampp-control-panel.py
Icon[en_CA]=/usr/share/icons/Humanity/devices/24/network-wired.svg
Encoding=UTF-8
Terminal=false
Name[en_CA]=XAMPP Control Panel
Comment[en_CA]=Start and Stop XAMPP
Type=Application
Icon=/usr/share/icons/Humanity/devices/24/network-wired.svg
If you want to use another icon or if you are using another theme then make sure to change the path to the icon you want to showing up for the xampp control panel.
Change this line (twice) to match the location of the icon you want to use.
3. The xampp control panel should now show up in Applications > Other
You should get to see something like this :
That was it!
Now run along and go do something usefull
Wednesday, September 14, 2011
Setting the Scrollbar Color
To change the color of a scrollbar to fit your website may be done quite easily. However, it should not be a major part of your website's overall design since it may only be viewed in Internet Explorer.
The color scrollbar must be put either in a layer that has overflow set or in the body. Here is an example:
body {
scrollbar-arrow-color: #000000;
scrollbar-base-color: #00CCFF;
scrollbar-face-color: #0099FF;
scrollbar-highlight-color: #00CCFF;
scrollbar-shadow-color: #00CCFF;
scrollbar-3dlight-color: #00CCFF;
scrollbar-track-color: #00CCFF;
scrollbar-darkshadow-color: #00CCFF; }
You may customize the colors as you need. Just change the hexidecimals to the color you wish to use.
Tuesday, September 13, 2011
Background:CSS Properties
background-color: #000;
Pretty obvious on what this means.
background-image: url(image.jpg);
url is literally url. However the word image.jpg should be the name of the image you wish to use.
background-repeat: no-repeat;
This stops the browser from repeating the image used. You may also use repeat, repeat-x or repeat-y inplace of no-repeat to have the image repeat itself. repeat-x meaning repeating horizontally, repeat-y meaning repeating virtically.
background-attachment: fixed;
Using fixed will make the background not move when you scroll the page. When exchanging the word "fixed" for "scroll" the background will move.
background-position: 50px 50px;
Using this puts your background at a specific position. You may use pixels or percentages to place the background by horizontal position first then virtical following. Or, you may use one of these:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Background Shortcut
The background shortcut is when you may use all or some background styles. To use the background shortcut, write it in this order:
color
image
repeat
attachment
position
Example: background: { #000 url(bg.jpg) no-repeat fixed center center; }
Thursday, September 8, 2011
Custom CSS Cursors
Using CSS, you can change the default cursor icon associated with a
particular element, even specifying your own cursor image (in IE6+)
instead. However, with power comes responsibility. Modify the cursor only
when it makes sense to, such as when you're applying it to a custom
interface. Like popup windows of JavaScript, changing cursors can quickly
become counterproductive and irritating to the user.
Below lists all the available values for the CSS property "cursor" (as of
CSS2.1):
Icon
Value
Live example (move mouse
over box)
Browser
auto
The User Agent determines the cursor to display
based on the current context.
All
default
style="cursor:
default;"
All
hand
style="cursor: hand;"
IE
pointer
style="cursor:
pointer;"
NS6/ IE6
hand & pointer
style="cursor: pointer; cursor: hand;"
Cross browser
crosshair
style="cursor:
crosshair;"
All
text
style="cursor: text;"
All
wait
style="cursor: wait;"
All
help
style="cursor: help;"
All
inherit
Takes on its parent element's computed cursor
value.
All
move
style="cursor: move;"
All
e-resize
style="cursor:
e-resize;"
All
ne-resize
style="cursor:
ne-resize;"
All
nw-resize
style="cursor:
nw-resize;"
All
n-resize
style="cursor:
n-resize;"
All
se-resize
style="cursor:
se-resize;"
All
sw-resize
style="cursor:
sw-resize;"
All
s-resize
style="cursor:
s-resize;"
All
w-resize
style="cursor:
w-resize;"
All
progress
style="cursor:
progress;"
IE6
all-scroll
style="cursor:
all-scroll;"
IE6
col-resize
style="cursor:
col-resize;"
IE6
no-drop
style="cursor:
no-drop;"
IE6
not-allowed
style="cursor:
not-allowed;"
IE6
row-resize
style="cursor:
row-resize;"
IE6
url(uri)
style="cursor: url(mycursor.cur);" Note: Only .cur and .ani file types are supported
as of IE6.
In Drupal7 you can install modules from the admin section, but I still feel this new feature doesn't have any meaning, because we have to search for the module link in the Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).
Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules.
Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;
(1) Views (2) Views UI (3) Views Slideshow (4) (5) Chaos tools (6) Link (7) Libraries (8) Token (Optional)
(3) Create Image Cache
In Drupal7 imagecache is part of core module and is named as Image styles. So let's create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 935x293 (pixels) dimension for the full size slider image and 210x100 (pixels) dimension for the thumbnail image. Note: These configurations csn be defered depends on your needs. * Fullsize Slider image settings
Go to http://www.yoursitename.com/node#overlay=admin/config/media/image-styles and click on the add new style link
(1) Give an Image style name and click on create new style button
(2) On the next configuration screen select new style you want and then click add button (In this tutorial I choose resize style)
(3) On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 pixels.
Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 pixels.)
(4) Create New Content Type
Let's create a new content type, From the dashboard menu bar cick on Structure and then content types then click on the add new content type link.
(1) Give a human-readable name, I named it as Featured Slider (machiine name will be auto generated based on the human readable name)
(2) Give a brief and relevant description
(3) Submission form settings, I leave as the default settings
(4) Publishing options, I checked only published (all other settings unchecked)
(5) Display settings, I have unchecked the authour and date info.
(6) Comment settings,I set hidden (disabled)
(7) Menu settings, I leave as default settings.
(8) Click Save and add fields Button
(5) Create New Fields
Here in this example I create only two fileds, and they are image field and link field.
We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked. Image Field Settings
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
I set this field as required, I added a file director name called slider-image so that this images will be arranged sperately from other images.
You can set the maximum upload size and resolution here, I have anabled alt and title field and finally click Save settings button.
By using same method create the link field too. Link Field Settings
(1) Label: Slider Link
(2) Field: slider_link
(3) Field type: link
(4) Widget (form element): link
(5) Click Save button,
For the link field configurations leave evrything to default settings.
I have re arranged the field like shown below;
Title field
Image field
Link field
Body field (you can even remove this field if not necessary)
Manage Display
On the manage display tab you can conigure how the out put of the field to be diplayed.
I have set the link field as hidden and I have also set image label as hidden
(6) Create Feature Slider Content
I have created four featured slider content for this tutorial.
(1) Click on add content link
(2) Create Featured Slider content
(3) Give a proper title name
(4) Upload slider image
(5) Give alt and title field names
(6) Give a link title and url where you want the slider to be linked
(7) Leave all othe settings as default except for the path field if yo want you can give an SEO friendly URL alias.
(8) Save the content.
Same way create more Featured Slider contents (I have created four contents)
(7) Create a New View
Now it's time to create our new Slideshow view.
From the Dashboard menu click on the Structure and then click on the Views.
(1) Click add new view link
(2) Give view name, I have named as Featured Slider (machiine name will be auto generated)
(3) Give an apropriate view description
(4) Choose Show Content of type Featured Slider (your content type name).
(5) Uncheck Create a Pge and check Create a block
(6) Type in Block title and choose display format as "Slideshow" of "fields" items per page 5 (you can enter the number of items you want to display)
(7) Click the button "Continue & edit" Views Field Settings
First let's add link field (link must be the first field in order to work everything properly) so click on the add icon and from the filter Groups select Content
Add Content: Link, Click "Add & configure button" in the next cofiguration window uncheck "Create a label". "Check" Exclude from display.
Click "Apply button"
Next let's add image field, so click on the add icon and from the filter Groups select content
Add Content: image field (Note:make sure you choose the image field which we crerated for this slider content type only.)
Click "Add & configure button" in the next cofiguration window uncheck "Create a label". Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!) Image Style : Fullsize (Choose the imagecache you have created in the above step) Link image to : Nothing Style Settings : Leave default settings No result behaviour : Leave default settings Rewrite Results : Check Output this field as a link Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click "Apply button"
Finally we need one more field for the thumbnail, so let's click on the add icon and from the filter Groups select Content
Add Content: image field (Note:make sure you choose the image field which we crerated for this slider content type only.)
Click "Add & configure button" in the next cofiguration window uncheck "Create a label" and CHECK EXCLUDE FROM DISPLAY, Formatter : Image (if you have installed Colorbox or lightbox you can choose them here!) Image Style : Thumbnail (Choose the imagecache you have created in the above step) Link image to : Nothing Style Settings : Leave default settings No result behaviour : Leave default settings Rewrite Results : Check Output this field as a link Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click "Apply button" Views Filters Settings In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here! Views Style Settings
Click on the Format Slideshow | settigs and on the next configuratioin window set as below;
(1) List type: Unordered list
(2) Wrapper class: Leave default settings
(3) Style> Skin: deafult
(4) Slides> Slideshow type: cycle
(5) Cycle options You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin athttp://malsup.com/jquery/cycle. IN SIMPLE ENGLISH
Create a folder named "libraries" in the site/all directory and then create an another folder named "jquery.cycle" in that directory and finally copy and paste only the "jquery.cycle.all.min.js" into this directory.
(6) Transittion: Fade
(7) Action: pause on hover
(8) Internet Explorer Tweaks: default
(9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)
(10) Bottom Widgets>Pager>Pager type: Fields
(11) Pager field: Content: Image (Note: last one we added for the thumb, don't mistake since both field will be named same.)
(12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked.
(13) Click Apply button. Format Show Field Settings
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Create a Custom Region (optional step)
(1) On your thems folder open the your_theme_name.info file and add a new region like this shown below; regions[featured_slider] = Featured Slider and save the .info file.
(2) Open your themes page.tpl.php file and add these code where you want your slide to be displayed as shown below; <?php if ($page['featured_slider']): ?>
<div id="featured-slider">
<?php print render($page['featured_slider']); ?>
</div> <!-- End Featured Slider-->
<?php endif; ?>
You can even create custom front page template like page--front.tpl.php so that you do't need to make any changes to the default page.tpl.php template.
[9] Enable & configure the Block
Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure>Block and enable the block to a themes default region or the custom region we created (featured_slider). (Regions varies depends on the theme you are using.) Block Configuration Settings
After enabling the block you get a link to configure the block so click on the Configure link and on the settings section set as below;
(1) Block title (if you don't want blobk title to be displayed just type <none>)
(2) Again you get all enabled theme specific Region settings. On visibility setings
(3) Pages>Show block on specific page: choose Only the listed pages and type <front> so that this block will be displayed only on the front page.
CSS TIPS TO DISPLAY THUMBNAILS INLINE
Add these CSS codes to your themes style sheet to display the thumbnails inline.
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 20px 6px; } Make necessary adjustments.
That's all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt's comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.
Play around and find the best you can in Drupal7, Best wishes.
The following is an example of a complete QuestionForm data structure. Remember that to pass this structure in as a parameter to an operation, XML characters must be escaped as character entities.
<QuestionForm xmlns="[the QuestionForm schema URL]">
<Overview>
<Title>Game 01523, "X" to play</Title>
<Text>
You are helping to decide the next move.
</Text>
<Binary>
<MimeType>
<Type>image</Type>
<SubType>gif</SubType>
</MimeType>
<DataURL>
http://tictactoe.amazon.com/game/01523/board.gif
</DataURL>
<AltText>The game board, with "X" to move.</AltText>
</Binary>
<Text>
Player "X" has the next move.
</Text>
</Overview>
<Question>
<QuestionIdentifier>nextmove</QuestionIdentifier>
<DisplayName>The Next Move</DisplayName>
<IsRequired>true</IsRequired>
<QuestionContent>
<Text>
What are the coordinates .....?
</Text>
</QuestionContent>
<AnswerSpecification>
<FreeTextAnswer>
<Constraints>
<Length minLength="2" maxLength="2" />
</Constraints>
<DefaultText>C1</DefaultText>
</FreeTextAnswer>
</AnswerSpecification>
</Question>
<Question>
<QuestionIdentifier>likelytowin</QuestionIdentifier>
<DisplayName>The Next Move</DisplayName>
<IsRequired>true</IsRequired>
<QuestionContent>
<Text>
How likely is it that player "X" will win this game?
</Text>
</QuestionContent>
<AnswerSpecification>
<SelectionAnswer>
<StyleSuggestion>radiobutton</StyleSuggestion>
<Selections>
<Selection>
<SelectionIdentifier>notlikely</SelectionIdentifier>
<Text>Not likely</Text>
</Selection>
<Selection>
<SelectionIdentifier>unsure</SelectionIdentifier>
<Text>It could go either way</Text>
</Selection>
<Selection>
<SelectionIdentifier>likely</SelectionIdentifier>
<Text>Likely</Text>
</Selection>
</Selections>
</SelectionAnswer>
</AnswerSpecification>
</Question>
</QuestionForm>
