Entry 7 (May 28th)
Is there a code that tracks activity on your site? (Not 100% sure of validity of this site/code)
1. Open a Google Analytic account and find your tracking idea
If you don't already have an account, you'll need to set up Google Analytics. Your tracking ID is in the format UA-xxxxxxxx-y; you get it when you add a new property (website) to analytics. You can find the ID on the "Tracking Info" tab of the Admin page:
2. Add the image tag to each page you want to track
After you open your Google Analytics account, you just need to add the following image tag to every page you want to track:
<img src="http://nojsstats.appspot.com/UA-xxxxxxxx-y/your-page.com?r=http://www.the-referer.com/" />
UA-xxxxxxxx-y is your tracking ID,
Your-page.com is the address of the page being tracked
www.the-referer.com is the address of the referring page.
The code below shows you how to track a whole website, verse one page.
<img src="http://nojsstats.appspot.com/UA-xxxxxxxx-y/<?php echo $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?><?php if($_SERVER['HTTP_REFERER']){echo '?r='.$_SERVER['HTTP_REFERER'];}; ?>&dummy=<?php echo rand(); ?>" />
Substitute your tracking ID and you can use this code without further modification on every page of your website. You can also include it in templates if you use Wordpress or any other CMS.
When someone visits your page for the first time, their browser will request the image and the visit will be registered. However, as browsers cache images, when that person visits the page again the visit won't be registered. Add these lines of code to the top of your page:
<?php header("Pragma-directive: no-cache"); header("Cache-directive: no-cache"); header "Cache-control: no-cache"); header("Pragma: no-cache"); header("Expires: 0"); ?>
With this code, you can see:
- Pageviews
- Visitor's location
- Browser
- Internet provider
- Visit from mobile or not
- Visitor's flow
- Visit duration
- Landing pages
- In-page analytic
- Real-time analytic
Source: https://moz.com/ugc/how-to-track-website-visitors-with-javascript-disabled
Entry 6 (May 8th)
How do you get a Youtube video (that is imported to your site) to start on hover?
You can insert the Javascript code right after the video, and change the following names to fit your downloaded video.
(make sure your video is downloaded correctly) (code for video below)
<iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
Use this Javascript code for this to work.
function onYouTubeIframeAPIReady() {
var videos = $$('iframe'), // the iframes elements
players = [], // an array where we stock each videos youtube instances class
playingID = null; // stock the current playing video
for (var i = 0; i < videos.length; i++) // for each iframes
{
var currentIframeID = videos[i].id; // we get the iframe ID
players[currentIframeID] = new YT.Player(currentIframeID); // we stock in the array the instance
// note, the key of each array element will be the iframe ID
videos[i].onmouseover = function(e) { // assigning a callback for this event
var currentHoveredElement = e.target;
if (playingID) // if a video is currently played
{
players[playingID].pauseVideo();
}
players[currentHoveredElement.id].playVideo();
playingID = currentHoveredElement.id;
};
}
}
onYouTubeIframeAPIReady();
This code also works in HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
</head>
<body>
<div>TODO write content</div>
<ul class="image-grid" id="list">
<li>
<iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<iframe id="player1" width="385" height="230" src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<iframe id="player2" width="385" height="230" src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
</body>
</html>
If this doesn't work, you can always draw a transparent div over the play/pause button on the video player. This will allow the video to start/stop when it is clicked on, while looking like you have not physically started or stopped the video.
By clicking on the video screen, it will automatically start/stop, without showing you the Youtube play/pause button.
Source: http://stackoverflow.com/questions/20706799/start-youtube-video-on-hover-mouseover
Entry 5 (April 17th)
How do you make social media buttons?
Social media buttons show the number of likes on Facebook, tweets on Twitter, or +1d on Google Plus that an article or website has received. These buttons allow your viewers to share your site with other people.
This Javascript should be placed in the body tags, right where you want these buttons to appear.
The Javascript for Google Plus and Twitter are as followed:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
The HTML code for Google+1, Twitter, Reddit, and Delicious are as followed:
<g:plusone></g:plusone>
<a href="/http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YourSite">Tweet</a>
<a href="/http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="http://www.reddit.com/static/spreddit7.gif" alt="submit to reddit" border="0" /> </a>
<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="/http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
An example of these buttons is shown below:
Source: http://www.htmlgoodies.com/beyond/webmaster/how-to-add-social-networking-buttons-on-your-site.html
Entry 4 (March 27th)
How do you skew an object horizontally (shear an object) in InDesign?
1. Select an object on the page (shown when the bonding box appears).
2. Click and hold the free transform tool until the sheer tool is available. The sheer tool should look like a cross.
3. Click anywhere above or below the object and drag. The shift key allows you to drag in 45º increments. Entering an exact value into the transform panel has the same effect.
Image after being skewed
This code allows the same thing to happen. Past this into your code of formatting an image.
public static Point ShearXY(this Point source, double shearX,
double shearY,
int offsetX,
int offsetY)
{
Point result = new Point();
result.X = (int)(Math.Round(source.X + shearX * source.Y));
result.X -= offsetX;
result.Y = (int)(Math.Round(source.Y + shearY * source.X));
result.Y -= offsetY;
return result;
}
By changing the X value, you can alter the x-coordinate representing the sheer formatting. The Y value allows you to alter the vertical sheer transformation.
Source: http://www.dummies.com/how-to/content/how-to-shear-objects-in-adobe-indesign-cs6-documen.html
https://code.msdn.microsoft.com/Image-Transform-Shear-1a7eca3d
Entry 3 (March 13th)
How do you create a transparent image?
The CSS3 property for a transparent image is opacity
Use this code to make an image transparent:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Under img tag add your own image
For IE9, Firefox, Safari, and Chrome you can change the opacity by playing around with the number (.4 is the given amount). This amount can be between 0 and 1. The lower the amount, the more transparent the image is.
For 1E8 and earlier, change the opacity (40 is the given amount). This amount can be between 0 and 100. If you are not using this browser, you can ignore this step.
To place text in a transparent image, use this code:
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
The background should be changed by adding your own .jpeg file. The border can also be changed by adding a different thickness and by changing the hex code. Under the paragraph tag, change the text to fit your needs. First, create a <div> element with a background image. Then create another <div> inside the first <div> which will be transparent. Place your text in the transparent <div>.
Source: http://www.w3schools.com/css/css_image_transparency.asp
Entry 2 (February 27th)
How do you make an image rollover when the mouse is placed over it?
Using the following code, add to your HTML/ Javascript file
1. Use the following code
<a href="/URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src=URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
(change the code that is colored to fit your personal website and image)
For example, the URL address becomes your website's address. The URL of the first image is the link to the image that appears before the rollover. The second link image is the image that should be seen during the rollover.
If you do not want to use the above code, you can create the same feature in Adobe Dreamweaver. The steps are as followed:
1. Create at least two images to be used as rollovers (saved on desktop in the correct format) (for best results, use images with the same width and height)
2. Place your mouse on the page where you want the rollover to appear and choose "insert→image objects→rollover image" or using the insert panel, from here click the rollover image button
3. Type the image name into the image name text field
4. Click the browse buttons (to the right of the original image and rollover image text fields) to locate the image that you want to appear as a default on the page (an example of the default image and the rollover image is shown below)
5. Leave the pre-load rollover image box selected- this prevents delays in rollovers
6. Type the appropriate alternative text in the alt field text section
7. Click OK
8. If you would like to preview this, you can click file, than preview
Source: http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html
http://www.dummies.com/how-to/content/how-to-create-rollovers-in-adobe-dreamweaver-cs6.html
Entry 1 (February 9th)
How do you make a website password protected?
Using Javascript:
1. Use the code below with the following password to add a low sense of security to a website
Code (paste into the <body> tags): <SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('You Got it Right!');
window.open('protectpage.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>
Password: letmein
Source: http://www.javascriptkit.com/script/cut10.shtml
Comments (5)
Lori said
at 12:09 pm on Feb 24, 2015
Entry #1, 4/4. Very useful post but you need to be more specific with your directions. Where do you add in the password in the code? Also, provide an image to help visually display the outcome of your code.
Lori said
at 8:11 am on Mar 17, 2015
Entry #2: 4/4. All required elements are provided. Your directions are very clear and I like how you also included the Dreamweaver approach to apply the same code.
Lori said
at 8:28 am on Mar 31, 2015
Entry #3: 4/4. This is a very useful post and all required elements are provided. I am glad you provided these directions using CSS3 rather than Photoshop.
Lori said
at 8:52 am on Apr 9, 2015
Entry #4: 4/4. This is a really neat post with all of the required elements! I will have to try it out myself.
Lori said
at 7:57 am on May 20, 2015
Entry #5: 4/4
Entry #6: 4/4
Interesting posts- especially the YouTube on hover code.
You don't have permission to comment on this page.