calling rel for anchor from JavaScript file? - javascript
I have an asp.net file which call an JS file
the problem is
when I call anchor property from aspx page it displayed correctly
but when I tried to call it from js file it works false
my code as
aspx page
<ul id="gallery_id">
<li class="first">
<img src="images/demo/gallery/1.jpg" alt="Title Text" /></li>
<li><a href="images/demo/gallery/2.jpg" rel="prettyPhoto[gallery1]" title="Image 1">
<img src="images/demo/gallery/2.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/3.jpg" rel="prettyPhoto[gallery1]" title="Image 2">
<img src="images/demo/gallery/3.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/4.jpg" rel="prettyPhoto[gallery1]" title="Image 3">
<img src="images/demo/gallery/4.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 4">
<img src="images/demo/gallery/174x150.gif" alt="Title Text" /></a></li>
</ul>
when I tried to call it dynamically from js file
as
function view_gallery(response) {
if (response != null) {
for (var i = 0; i < response.length; i++) {
if (i == 0) {
$('#gallery_id').append($('<li id=\"' + response[i].image_guid + '\" class=\"first\" > ' +
'<img src=\"../images/demo/gallery/' + response[i].image_location + '\" alt=\"' + response[i].image_location + '\" /></li>'));
}
else {
$('#gallery_id').append($('<li id=\"' + response[i].image_guid + '\">' +
' <a href=\"../images/demo/gallery/' + response[i].image_location+'"'
+ ' rel=\"prettyPhoto[gallery1]\" title=\"Image 1\">' +
' <img src=\"../images/demo/gallery/' + response[i].image_location
+ '\" alt=\"Title Text\" /></a></li>'));
}
my asp plugins are:
<script type="text/javascript" src="layout/scripts/jquery.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.defaultvalue.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#fullname, #validemail, #message").defaultvalue("Full Name", "Email Address", "Message");
$('#shout a').click(function () {
var to = $(this).attr('href');
$.scrollTo(to, 1200);
return false;
});
$('a.topOfPage').click(function () {
$.scrollTo(0, 1200);
return false;
});
$("#tabcontainer").tabs({
event: "click"
});
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'dark_rounded'
});
});
</script>
<!-- prettyPhoto -->
<link rel="stylesheet" href="layout/scripts/prettyphoto/prettyPhoto.css" type="text/css" />
<script type="text/javascript" src="layout/scripts/prettyphoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'dark_rounded',
overlay_gallery: false,
social_tools: false
});
});
</script>
<script type="text/javascript" src="javascript/gallery.js"></script>
it displayed images but ignores value in rel of anchor element
please help
Related
Javascript: Want 'this.title' to be the title of DOM element, not window
I recently asked this question. I was provided with a jsFiddle solution...that works in jsFiddle, but not my code. When I run my code (using Visual Studio 2019 - a .NET Core 3 website), unfortunately, the this.title value returns whatever value is in the title of the page, not the DOM element. I have run this in Edge and Chrome, same results.
In my layout page, I have all of the scripts:
<script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
<script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script> <!--This is the script with the code in question -->
The code that is in SearchApplicants.js is:
$(function () {
$('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});
function addClickedLetter(letter) {
searchString = $("#txtSearchLastName").val() + letter;
$("#txtSearchLastName").val(searchString);
};
I've even tried putting that script code directly into the layout page (rather than referencing the script) and it still has this.title as the value of the <title></title> element, not of the link elements like I want.
Unfortunately, that question was closed and I can't get further answers or comments on that one. The code works in terms of adding the onclick function the way I wanted it, the issue now is getting this.title to be the title of each link element rather than the title of the page.
UPDATE
Here's the full rendered HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="~/Content/Styles/site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
<script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
</head>
<body class="style1">
<img id="banner" src="~/Content/Images/Banner.jpg" alt="Need to put something here..." />
<form id="masterForm">
<div>
<table class="style1" summary="This table is for formatting purposes only.">
<tr>
<td colspan="2">
<h2>This is for a title...</h2>
<hr />
</td>
</tr>
<tr>
<td style="width:15%" valign="top">
<table summary="This table is for formatting purposes only.">
<tr>
<td style="background-color:#C0C0C0">
<a asp-controller="Search" asp-action="Index" accesskey="A"><u>A</u>liens</a>
</td>
</tr>
<tr>
<td style="background-color:#C0C0C0">
<a asp-controller="Search" asp-action="Cowboys" accesskey="C"><u>C</u>owboys</a>
</td>
</tr>
<tr>
<td style="background-color:#C0C0C0">
<a asp-controller="Search" asp-action="ET" accesskey="E"><u>E</u>.T.</a>
</td>
</tr>
<tr>
<td style="background-color:#C0C0C0">
<a asp-controller="Home" asp-action="Logout" accesskey="L"><u>L</u>ogout</a>
</td>
</tr>
</table>
</td>
<td>
<label id="lblTitle" style="font-weight:bold;">Alien Search Page</label>
<br />
<br />
<a id="addAToSearch" class="searchLetters" title="A" accesskey="A">A</a>
<a id="addBToSearch" class="searchLetters" title="B" accesskey="B">B</a>
<a id="addCToSearch" class="searchLetters" title="C" accesskey="C">C</a>
<a id="addDToSearch" class="searchLetters" title="D" accesskey="D">D</a>
<a id="addEToSearch" class="searchLetters" title="E" accesskey="E">E</a>
<a id="addFToSearch" class="searchLetters" title="F" accesskey="F">F</a>
<a id="addGToSearch" class="searchLetters" title="G" accesskey="G">G</a>
<a id="addHToSearch" class="searchLetters" title="H" accesskey="H">H</a>
<a id="addIToSearch" class="searchLetters" title="I" accesskey="I">I</a>
<a id="addJToSearch" class="searchLetters" title="J" accesskey="J">J</a>
<a id="addKToSearch" class="searchLetters" title="K" accesskey="K">K</a>
<a id="addLToSearch" class="searchLetters" title="L" accesskey="L">L</a>
<a id="addMToSearch" class="searchLetters" title="M" accesskey="M">M</a>
<a id="addNToSearch" class="searchLetters" title="N" accesskey="N">N</a>
<a id="addOToSearch" class="searchLetters" title="O" accesskey="O">O</a>
<a id="addPToSearch" class="searchLetters" title="P" accesskey="P">P</a>
<a id="addQToSearch" class="searchLetters" title="Q" accesskey="Q">Q</a>
<a id="addRToSearch" class="searchLetters" title="R" accesskey="R">R</a>
<a id="addSToSearch" class="searchLetters" title="S" accesskey="S">S</a>
<a id="addTToSearch" class="searchLetters" title="T" accesskey="T">T</a>
<a id="addUToSearch" class="searchLetters" title="U" accesskey="U">U</a>
<a id="addVToSearch" class="searchLetters" title="V" accesskey="V">V</a>
<a id="addWToSearch" class="searchLetters" title="W" accesskey="W">W</a>
<a id="addXToSearch" class="searchLetters" title="X" accesskey="X">X</a>
<a id="addYToSearch" class="searchLetters" title="Y" accesskey="Y">Y</a>
<a id="addZToSearch" class="searchLetters" title="Z" accesskey="Z">Z</a>
<br />
<label id="lblSearchLastName" for="txtSearchLastName" accesskey="N">Last Name: </label>
<input id="txtSearchLastName" type="text" tabindex="1" maxlength="23" class="uppercase" readonly />
<button id="btnClear" tabindex="27" title="Clear" accesskey="C">Clear</button>
<button id="btnList" tabindex="28" title="Show List" accesskey="S">Show List</button>
<hr />
</td>
</tr>
</table>
<br /><br />
<div>
Some text goes here...
</div>
<br />
</div>
</form>
</body>
</html>
Here's what's in rightClick.js:
//******************************************************************************
// Module : rightClick.js
//******************************************************************************
var BM = 2; // button middle
var BR = 3; // button right
var msg = "Mouse right-click is not supported on this page.";
function mouseDown(e) {
try { if (event.button == BM || event.button == BR) { return false; } }
catch (e) { if (e.which == BR) { return false; } }
}
document.oncontextmenu = function () { alert(msg); return false; }
document.ondragstart = function () { alert(msg); return false; }
document.onmousedown = mouseDown;
//******************************************************************************
Here's what's in OpenTargetWindow.js:
function openTargetWindow(form, windowName) { var features; var PWfeatures; var sWidth = 778; var sHeight = 580; var PWWidth = 386; var PWHeight = 255; var PWCenterLeft = (screen.width / 2 - PWWidth / 2); var PWCenterTop = (screen.height / 2 - PWHeight / 2); var is_NN = (navigator.appName.indexOf('Netscape') != -1); var is_IE = (((navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('opera') == -1)) && (!is_NN)); if (is_IE) { features = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=20,left=14'; features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ''; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth; } else { features = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=yes,screenX=0,top=20,left=5,autocomplete=no,frameborder=no,directories=no'; PWfeatures = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=no,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ',autocomplete=no,frameborder=no,directories=no'; if (window.screen) { features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth + ''; } else { if (window.all) { features += ',fullscreen=yes'; } else { features += ',height=480,width=640'; } } } var main = open(form, windowName, features); }
Both rightClick.js and OpenTargetWindow.js were copied from the previous application.
Here's what's in SetDefinitions.js:
$(function () {
function setDefinitionTitle(className, defintion) {
var childElements = document.getElementsByClassName(className);
for (i = 0; i < childElements.length; ++i) {
var ele = childElements[i];
ele.setAttribute('title', defintion);
}
};
function setDefinition1() {
setDefinitionTitle('def1', 'The first definition...');
}
function setDefinition2() {
setDefinitionTitle('def2', 'The second definition...');
}
function setDefinition3() {
setDefinitionTitle('def3', 'The third definition...');
}
function setDefinition4() {
setDefinitionTitle('def4', 'The fourth definition...');
}
setDefinition1();
setDefinition2();
setDefinition3();
setDefinition4();
});
And finally, here's what's in SearchApplicants.js:
$(function () {
$('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});
function addClickedLetter(letter) {
searchString = $("#txtSearchLastName").val() + letter;
$("#txtSearchLastName").val(searchString);
};
Maybe you could try something like:
$(function () {
$('.searchLetters').on('click', function (e) { addClickedLetter(e.currentTarget.value); });
});
How to add captions for images in owl carousel
I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
afterAction: function(el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems
.eq(this.currentItem)
.addClass('active')
},
onInitialized: function() {
var activeImg = $('.owl-carousel').find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
}
});
owl = $('.owl-carousel').owlCarousel();
$('.prev').click(function() {
owl.trigger('prev.owl.carousel');
});
$('.next').click(function() {
owl.trigger('next.owl.carousel');
});
owl.on('translated.owl.carousel', function(event) {
var activeImg = $(this).find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
});
});
The script is not working properly.
In this solution i am using HTML figcaption element that represents a caption or a legend associated with a HTML figure.
Also i have added all the needed logic at OWL Carousel afterMove after move callback:
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
singleItem: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr({
'src': currentImg.attr('src'),
'alt': currentImg.attr('alt'),
'title': currentImg.attr('title')
});
$('#figcaption').text(currentImg.attr('title'));
}
});
.owl-carousel .owl-item img {
display: block;
width:80%;
height:100px;
}
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
#YosvelQuintero posted the script but don't know why he deleted it. So I am posting it again in case if anybody need it.
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
display : none;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr('src', currentImg.attr('src'))
.attr('alt', currentImg.attr('alt'))
.attr('title', currentImg.attr('title'));
$('#figcaption').text(currentImg.attr('title'));
}
});
</script>
Jquery set attribute to every element
I want to set attribute of every a tag as img tag's src.
Here is what I did.
$(document).ready(function() {
var href=$('.single img').attr('src');
$('.single').attr('href',href);
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single" >
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
But every a tag has same href.
How can I fix this
You can use attr() with callback, which iterate over the elements and update the attribute by getting children img attribute value
$(document).ready(function() {
$('.single').attr('href', function() { // iterate over a tag
return $(this)
.find('img') // get children img
.attr('src') // get arc attribute
});
$(".single").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
You should go through all of the images and assign it one by one (That's using your own code).
You can do something like:
$(document).ready(function() {
$(".single img").each(function() {
var href=$(this).attr('src');
$(this).parent().attr('href',href);
})
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
Using sketch.js I want to download more of the produced data
When I press the download key on it does not download the quote that is present. Is there a way to change this? I tried playing around with the "data-" tag but can get nothing to work.
Here is the code
<title>SNUGGLETOOTH</title>
</head>
<body>
<nav>
<div id="SketchTools">
<!-- Basic tools -->
<img src="img/black_icon.png" alt="Black"/>
<img src="img/red_icon.png" alt="Red"/>
<img src="img/green_icon.png" alt="Green"/>
<img src="img/blue_icon.png" alt="Blue"/>
<img src="img/yellow_icon.png" alt="Yellow"/>
<img src="img/cyan_icon.png" alt="Cyan"/>
<!-- Advanced colors -->
<img src="img/alizarin_icon.png" alt="Alizarin"/>
<img src="img/pomegrante_icon.png" alt="Pomegrante"/>
<img src="img/emerald_icon.png" alt="Emerald"/>
<img src="img/torquoise_icon.png" alt="Torquoise"/>
<img src="img/peterriver_icon.png" alt="Peter River"/>
<img src="img/amethyst_icon.png" alt="Amethyst"/>
<img src="img/sunflower_icon.png" alt="Sun Flower"/>
<img src="img/orange_icon.png" alt="Orange"/>
<img src="img/clouds_icon.png" alt="Clouds"/>
<img src="img/silver_icon.png" alt="Silver"/>
<img src="img/asbestos_icon.png" alt="Asbestos"/>
<img src="img/wetasphalt_icon.png" alt="Wet Asphalt"/>
</br> <img src="img/eraser_icon.png" alt="Eraser"/>
<!-- Size options -->
<img src="img/pencil_icon.png" alt="Pencil"/>
<img src="img/pen_icon.png" alt="Pen"/>
<img src="img/stick_icon.png" alt="Stick"/>
<img src="img/smallbrush_icon.png" alt="Small brush"/>
<img src="img/mediumbrush_icon.png" alt="Medium brush"/>
<img src="img/bigbrush_icon.png" alt="Big brush"/>
<img src="img/bucket_icon.png" alt="Huge bucket"/>
Download
<br/>
</div>
<div class="links">
<ul>
<li><img src="ficon.png" alt="Facebook"></li>
<li><img src="igramicon.png" alt="Instagram"></li>
<li><img src="picon.png" alt="Pinterest"></li>
<li><img src="mcicon.png" alt="Mixcloud"></li>
<li><img src="twicon.png" alt="Twitter"></li>
</ul>
</div>
<div class="message">
<div data id="quote"></div>
<script>
(function() {
var quotes = [
{ text: "Snuggletooth likes pancakes"},
{ text: "Would you like Snuggletooth to tuck you in?"},
{ text: " Snuggletooth loves you"},
{ text: "Snuggletooth is here for you"},
{ text: "Did you know that Snuggletooth </br>can be in 2 places at once?"},
{ text: "Heyyyy!<br> I was just thinking about you </br>Love Snuggletooth" },
{ text: "Wanna Sandwich??</br>xSnuggletooth"},
{ text: "Want some breakfast???</br> ;) Snuggletooth"},
{ text: "Snuggletooth-a-riffic!!!"},
{ text: "Snuggletooth makes great popcorn!"},
{ text: "Come over to Snuggletooth's! He makes a great guacamole!"},
{ text: "Snuggletooth likes his bubblebaths to smell like bubblegum"},
{ text: "Snuggletooth wants to know what are you up to later?"},
{ text: "Snuggletooth-a-licious!!!"},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'' + '';
})();
</script>
</div>
</nav>
<canvas id="SketchPad" width="1125" height="600">
</canvas>
</div>
<script type="text/javascript">
$(function() {
$('#SketchPad').sketch();
});
</script>
Try utilizing window.URL.createObjectURL , also adding style element to exported objectURL . See Drawing DOM objects into a canvas
$(function() {
$('#SketchPad').sketch();
$("#DownloadPng").on("click", function(e) {
e.preventDefault();
var canvas = document.getElementById('SketchPad');
var ctx = canvas.getContext('2d');
var style = $("style");
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="1125" height="600">'
+ '<foreignObject width="100%" height="100%">'
+ '<div xmlns="http://www.w3.org/1999/xhtml">'
+ $(".message")[0].outerHTML
+ '</div>'
+ '<style xmlns="http://www.w3.org/1999/xhtml">'
+ style[0].innerHTML + '</style>'
+ '</foreignObject>'
+ '</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
var popup = window.open(url, "popup")
})
});
jsfiddle http://jsfiddle.net/e1ovm9mn/1/
add a function on Page Load in Javascript
I have the folowing javascript code, what it does its loads a Map with different regions, when you hover or click over a country, it will display aditional information about that country in the right side of the map.
What i want to do is when the page loads, a random country is already showing information, without a hover or clic.
live example here: http://roneskinder.com/fm/image-map/index.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
continuous: true
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#map-container AREA").mouseover(function () {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).css('display', 'inline');
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'inline');
}
}).mouseout(function () {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery(regionMap).hasClass('selected')) {
jQuery(regionMap).css('display', 'none');
}
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'none');
}
});
jQuery("#map-container AREA").click(function () {
jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).addClass('selected').css('display', 'inline');
jQuery(regionList).addClass('selected').css('display', 'inline');
});
});
</script>
</head>
<body style="padding: 0; margin: 0;">
<form runat="server">
<div id="map-view-container">
<div id="map-container">
<img src='transparentMap.png' width='481' height='350' border='0' alt='' usemap='#regionMapView'
class='map' />
<map name='regionMapView' id='regionMapView'>
<area shape="poly" coords="101,148,103,139,102,135,112,124,125,118,131,110,135,112,142,107,167,104,181,101,188,102,194,97,193,92,207,99,237,98,250,93,285,107,253,123,238,121,231,129,227,136,210,149,194,147,183,154,174,155,175,171,162,176,158,171,149,170,147,153,136,152,133,158,122,150,113,152"
href="#Honduras" id="Honduras" />
<area shape="poly" coords="74,167,62,166,29,167,20,165,9,155,12,148,9,138,24,114,65,107,67,102,57,101,52,95,32,84,41,79,42,69,96,60,102,105,111,105,124,108,125,105,133,106,130,110,126,115,126,118,112,123,102,136,101,148,92,153,83,159"
id="guatemala" />
<area shape="poly" coords="157,178,172,191,207,215,214,216,224,213,241,212,257,210,264,215,271,220,280,217,281,212,273,203,278,188,273,192,275,183,276,169,282,180,283,162,283,145,290,129,286,114,288,107,273,110,251,124,237,121,236,127,227,133,226,137,209,149,198,147,184,153,174,155,176,172,157,179,157,178"
href="#nic" id="nic" />
<area shape="poly" coords="75,167,82,159,92,156,100,147,113,153,123,151,133,158,138,152,147,154,148,170,151,172,147,174,135,176,124,170,124,174"
href="#elSalvador" id="elSalvador" />
<area alt="panama England" shape="poly" coords="311,245,306,257,313,261,309,269,314,277,314,273,329,269,334,273,346,273,353,284,362,286,365,283,363,280,368,279,370,285,370,292,382,294,388,285,397,285,397,279,399,276,387,266,399,263,408,254,407,248,420,243,432,248,441,253,447,259,458,255,446,268,463,283,469,276,479,256,473,247,475,244,466,240,443,230,423,230,414,226,377,245,368,250,339,246,336,248,335,254,330,246,320,244,312,244"
href="#panama" id="panama" />
<!-- <area shape="poly" alt="southEast" id='southEast' coords="96,60,102,55,106,56,114,44,120,41,123,44,130,41,130,57,127,66,131,76,121,98,111,104,102,105"
href="#southEast" />-->
<area id="crica" alt="crica" shape="poly" coords="212,222,216,216,232,213,257,210,273,220,285,216,290,223,297,231,308,240,317,244,310,245,308,251,306,257,313,261,308,268,313,278,305,278,294,267,288,267,297,273,297,277,281,274,278,266,281,261,253,244,244,237,234,234,233,236,245,244,242,249,228,244,218,243,213,235,219,228,213,221"
href="#crica" />
<area id='london' shape='poly' alt='London' coords='186,365, 186,360, 187,360, 187,359, 188,359, 188,358, 189,358, 189,357, 191,357, 191,356, 192,356, 192,355, 196,355, 196,356, 198,356, 198,357, 200,358, 200,359, 201,359, 201,360, 203,360, 203,362, 202,362, 202,364, 200,364, 199,365, 198,366, 195,366, 194,367, 193,367, 193,368, 191,368,190,367, 188,367, 188,366, 187,366, 187,365'
href='#london' />
</map>
<img src='mvCostaRica.png' width='481' height='350' border='0' class='region crica-map'
alt='Costa Rica' />
<img src='mvPanama.png' width='481' height='350' border='0' class='region panama-map'
alt='Panama' />
<img src='mvGuatemala.png' width='481' height='350' border='0' class='region guatemala-map'
alt='Guatemala' />
<img src='mvHonduras.png' width='481' height='350' border='0' class='region Honduras-map'
alt='Honduras' />
<img src='mvElSalvador.png' width='481' height='350' border='0' class='region elSalvador-map'
alt='El Salvador' />
<img src='mvNicaragua.png' width='481' height='350' border='0' class='region nic-map'
alt='Nicaragua' />
<!-- <img src='mvBelice.png' width='481' height='350' border='0' class='region southEast-map'
alt='Belice' />-->
<img src="mvCentralAmerica.png" width="481" height="350" class="regionBg" />
</div>
<div id="practice-container">
<!--Nicaragua-->
<ul class="nic-list">
<li>
<iframe id="iframe1" src="../image-slider/nicaragua/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--El Salvador-->
<ul class="elSalvador-list">
<li>
<iframe id="iframe2" src="../image-slider/elSalvador/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Honduras-->
<ul class="Honduras-list">
<li>
<iframe id="iframe3" src="../image-slider/honduras/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Belice-->
<ul class="southEast-list">
<li>
<img src="images/0.png" alt="" /></li>
</ul>
<!--Panama-->
<ul class="panama-list">
<li>
<iframe id="iframe4" src="../image-slider/panama/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Guatemala-->
<ul class="guatemala-list">
<li>
<iframe id="iframe5" src="../image-slider/guatemala/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Costa Rica -->
<ul class="crica-list">
<li>
<iframe id="iframe6" src="../image-slider/costaRica/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
You're doing it fine, I can't really think without the visual stuff
keywords = ["crica","panama","guatemala","Honduras","elSalvador","nic"]
Then random function
var keyword = keywords[Math.floor(Math.random()*keywords.length)]
So you got a lot of stuff right here
jQuery("#map-container AREA").click(function () {
jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).addClass('selected').css('display', 'inline');
jQuery(regionList).addClass('selected').css('display', 'inline');
});
You'll need to change the click function for a new document ready and replace the AREA thing with the keyword. If a hash works better for you then:
document.location.hash = keyword;
You're doing it fine, you can do it.