I have the following code, put in a file called "showLessMore.js". this file is in the same folder as the python file used to render the webpage:
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> ' + config.moreText + '</span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
When I put the code directly in the webpage it works perfect. However, when I try to used the external file "showLessMore.js" as follows it doesn't work:
s.wfile.write('<script src="showLessMore.js"></script>')
This is the output in the html page, but when I click on the link of my JS file it doesn't show the file, which is bizarre:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
Could you tell me what could be the reason for that ?
Related
I have upgraded a solution from MVC 3 to MVC 4.
I have 2 specific JavaScript functions that does not work anymore after upgrade.
Tabs
This is how the tabs now render
I suspect it has to do with the JavaScript version with the new framework? I am not sure.
Code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$('.taberize').each(function () {
var e = $(this);
var panels = e.parents('.ui-tabs-panel');
if (panels.length == 0) { return; }
var tabId = $(panels[0]).attr('id');
e.attr('href', e.attr('href') + '#' + tabId);
});
$(".container").each(function (e) {
var height = $(document).height() - 230;
$(this).height(height);
});
});
2. On Row Hover function
The On-Row-Hover function does not work anymore, I have a "Action Menu" on the left side of my WebGrid, and on row hover, it display functions like Edit and Details menu... this is done in JavaScript.
<script type="text/javascript">
var prevRow = null;
$('#gridData table tbody tr').not(':first').hover(function()
{
$('#myMenu').hide();
if (prevRow != this)
{
if (prevRow != null)
{
$(prevRow).css("background","");
$('.actionButtons', $(prevRow)).hide();
}
$(this).css("background","#EDEFFF");
$('.actionButtons', $(this)).show();
prevRow = this;
}
},
function()
{
if (!$('#myMenu').is(":visible"))
{
if (prevRow != null)
{
$(prevRow).css("background","");
$('.actionButtons', $(prevRow)).hide();
prevRow = null;
}
}
});
$(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true },
function(action, el, pos) {
contextMenuWork(action, el.parents('tr')[0].id , pos);
});
function contextMenuWork(action, id) {
switch (action) {
case "insert":
{
if($.browser.msie&&$.browser.version.substr(0,1)<8){var url='#Url.Action("Create", "Account")';document.location=url}else{CreateNewAccount()}
break;
}
case "createtask":
{
var url = '#Url.Action("CreateFromAccount", "UserTask")' + '/' + id;
document.location = url;
break;
}
case "linkassessment":
{
var url = '#Url.Action("CreateFromAccount", "Questionnaire")' + '/' + id;
document.location = url;
break;
}
case "details":
{
var url = '#Url.Action("Details", "Account")' + '/' + id;
document.location = url;
break;
}
case "edit":
{
var url = '#Url.Action("Edit", "Account")' + '/' + id;
document.location = url;
break;
}
case "createperson":
{
if($.browser.msie&&$.browser.version.substr(0,1)<8){var url='#Url.Action("Create", "Person")';document.location=url}else{CreateNewPerson(id)}
break;
}
case "createopportunity":
{
var url = '#Url.Action("Create", "Opportunity")' + '/' + id;
document.location = url;
break;
}
}
}
});
</script>
<div id="gridData">
<ul id="myMenu" class="contextMenu" style="display: none">
<li class="insert">Create New</li>
<li class="detail">Details</li>
<li class="edit">Edit</li>
</ul>
</div>
<table>
<tr>
<th class="field-actions-account" style="width: 75px">
Actions
</th>
<tr id="#Html.Encode(item.AccountID)">
<td>
<div class="actionButtons" style="display:none">
<img src="#Html.Raw(#Url.Content("~/Content/img/document-pencil-icon.png"))" alt="Edit" title="Edit" style="border:none"/>
<img src="#Html.Raw(#Url.Content("~/Content/img/testDetailsIcon.gif"))" alt="Details" title="Details" style="border:none" />
<img src="#Html.Raw(#Url.Content("~/Content/img/options.gif"))" alt="More Options" class="openmenu" title="More Options"/>
</div>
put your javascript code in section like this:
#section Head
{
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$('.taberize').each(function () {
var e = $(this);
var panels = e.parents('.ui-tabs-panel');
if (panels.length == 0) { return; }
var tabId = $(panels[0]).attr('id');
e.attr('href', e.attr('href') + '#' + tabId);
});
$(".container").each(function (e) {
var height = $(document).height() - 230;
$(this).height(height);
});
});
</script>
}
then be sure your "#RenderSection("Head", false) is under your #Scripts.Render("~/bundles/jquery") in your layout like this :
#Scripts.Render("~/bundles/jquery")
#RenderSection("Head", false)
and finally check your BundleConfig class has a code like this file :
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
}
The problem was, somehow the jquery.validate file has been modified, and that was causing my problem.
the hosting company loads a script on all their sites that is allowing for the tabs to be dragged/dropped , however it is also causing the caption images within the same body_home page to be drag/drop , i have requested this be fixed but i don't think they are concerned.
I am permitted to load my own jquery, javascript , html ,css onto the site to do changes , but i can not stop the host from loading this js file , so how can i reverse this ? Here is a snippet of the portion of the js file i think that is causing this problem .
I am permitted to load my own footer and header messages , so is there anyway i can remove what they are doing here , or reverse the effect on the captions ?
i cant find a way for the listener to be removed from outside.
They have used an anonymous function on the event 'domready' .
Does javascript have a feature to remove the listener from outside the anonymous method
window.onload=function() {
if (document.getElementById("body_home")) {
set_up_double_click_events();
if (document.getElementById("homepagetabs") && document.getElementById("tab2")) {
new Sortables($('homepagetabs'), {
onComplete: function() {
var parent = this.element.parentNode;
var saveIt = false;
if (typeof currentTabOrder == "undefined") {
currentTabOrder = new Array();
for (var i = 0; i < parent.getChildren().length; i++) {
currentTabOrder[i] = i;
}
}
for (var i = 0; i < parent.getChildren().length; i++) {
var seqno = parent.getChildren()[i].id.substr("tab".length);
if (currentTabOrder[i] != seqno) {
saveIt = true;
currentTabOrder[i] = seqno;
}
}
if (saveIt) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=TABORDER&VALUE=" + currentTabOrder.join();
makeHttpRequest(url);
}
}
});
}
window.addEvent('domready', function() {
new Sortables('.homepagemodule CAPTION', {
clone: true,
revert: true,
opacity: 0.7,
onStart: function() {
dndMovingModule = this.element.parentNode.parentNode.id.toUpperCase();
},
onComplete: function() {
dndDroppedOntoModule = this.element.parentNode.parentNode.id.toUpperCase();
if (typeof dndMovingModule != "undefined" && typeof dndDroppedOntoModule != "undefined" && dndMovingModule != dndDroppedOntoModule) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=MODULE&VALUE=" + dndMovingModule + "," + dndDroppedOntoModule;
// alert("calling: " + url);
makeHttpRequest(url);
setTimeout("window.location.reload();", 250);
}
}
});
});
}
}
$(document).ready(function() {
$('#DIVID').on('mousedown', function(e) {
return false;
});
});
I would put an HTML class attribute on all of your images that are producing the problem. Obviously, jQuery uses CSS style selectors. See the following example.
$(function(){
$('.ElementClass').mousedown(function(){
return false;
});
});
When you return false; onmousedown it prevents the default behavior in most Browsers, which is to grab the image so the Client can drop and drag the image into into a new tab or window to view it with their Browser.
Hello I have a query regarding Kendo UI's Window Content. Basically I've picked up a nice little desktop-like (WebOS) setup that I'd like to fiddle around with. The application windows "openWin1" and "openWin2" are defined but are empty and have no content. Where do I add the content? In HTML5 or Javascript?
Any help would be greatly appreciated. I'm quite new to this.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Masrani Global OS</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="css/system.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.window.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div id="titleBar"><a id="openWin1" class="topBtn" href="#">Terminal</a><a id="openWin2" class="topBtn" href="#">Media Player</a></div>
<div id="deskTop"></div>
<div id="statusBar"><ul id="statusBarBtns"><li id="hideAll"><a class="statBarBtn" href="#">Show Desktop</a></li></ul><div id="logText"></div></div>
</body>
</html>
custom.js:
function log(data){
console.log(data);
}
function repositionWindow(elementName){
var thisWindow = $("#" + elementName).closest('.k-window'),
winOffset = thisWindow.offset(),
thisWindowWidth = thisWindow.width()
thisWindowHeight = thisWindow.height()
bottomEdge = winOffset.top + thisWindowHeight
rightEdge = winOffset.left + thisWindowWidth
deskTopOffset = $('#deskTop').offset()
deskTopHeight = $('#deskTop').height();
deskTopBottom = deskTopOffset.top + deskTopHeight - 25
deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
if(thisWindowWidth>$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
if(bottomEdge>deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
if(rightEdge>deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
if(winOffset.top < deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
if(winOffset.left < deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
if(thisWindow.offset().top<deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
}
function createWindow(elementName,Icon,WindowTitle,Width,Height){
$('body').append('<div id="'+elementName+'"></div>');
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
$('#statusBarBtns').append('<li id="statbar_'+elementName+'"><a class="statBarBtn" href="#WIN-'+elementName+'">'+WindowTitle+'</a></li>');
window.kendoWindow({
width: Width+"px",
height: Height+"px",
title: WindowTitle,
actions: ["Custom","Maximize", "Close"],
close: function(){
$('#statbar_'+elementName).remove();
$("#"+elementName).data("kendoWindow").destroy();
if(elementName == 'myWindow'){
$('#openWin1').show();
}
if(elementName == 'myWindow2'){
$('#openWin2').show();
}
},
activate: function(e){
repositionWindow(elementName);
},
dragend: function(e){
repositionWindow(elementName);
},
resize: function(e){
repositionWindow(elementName);
}
});
$("#" + elementName +'_wnd_title').parent().prepend('<img class="windowLeftIcon" src="icons/'+Icon+'.png"/>');
window = $("#" + elementName).data("kendoWindow");
var vv = window.wrapper.find(".k-i-custom");
vv.removeClass('k-i-custom').addClass('k-i-minimize2');
vv.click(function (e) {
$("#" + elementName).closest('.k-window').hide();
})
}
}
$('.statBarBtn').live('click',function(e){
e.preventDefault();
var elementName = $(this).attr('href');
if(elementName == '#') return;
elementName = elementName.replace("#WIN-","");
var wnd = $("#"+elementName).data("kendoWindow");
if(wnd.element.is(":hidden")){
$("#" + elementName).closest('.k-window').show();
wnd.toFront();
} else {
$("#" + elementName).closest('.k-window').hide();
}
});
$(document).ready(function() {
$('#openWin1').click(function(){
createWindow('myWindow','server','Terminal',500,300);
$(this).hide();
});
$('#openWin2').click(function(){
createWindow('myWindow2','server','Media Player',400,200);
$(this).hide();
});
$('#hideAll').click(function(){
$(".k-window-content").each(function(){
$(this).closest('.k-window').hide();
});
});
});
In your JavaScript, a div is created and added to the DOM:
$('body').append('<div id="'+elementName+'"></div>');
The Kendo Window object is then set up on the created div:
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
...
window.kendoWindow({...});
}
Therefore, any HTML content nested within the created div will be displayed within the Kendo Window, i.e.:
$('body').append('<div id="'+elementName+'"><p>This will appear in the window</p></div>');
I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg
my code is working in jfiddle but in html page its not working.my coading is given below pls view
my coading is:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Question/problem:not working in html page.
http://jsfiddle.net/5SVuA/1/
hope you understand my problem
First of all you have the wrong script type script type="text/jquery", instead of script type="text/javascript".
And move your javascript code to domready function:
$(function () {
//your code here
});
I have a div container which has a repeating background image that forms a pattern, and I would like to animate it with jQuery so that the pattern moves south-west.
How can this be done?
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="content/main.css">
<script src="content/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
Have a look at Sprightly. It's a jQuery plugin and makes animating background images reasonably easy.
To pan (animate a background image), the documentation gives this code as an example:
$('#trees').pan({fps: 30, speed: 2, dir: 'left'});
If you're looking for a simpler, lighter approach, this plugin may be a better solution. To animate a background, give it an offset:
$('.elem').animate({backgroundPosition: '500px 150px'})
Like this:
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
...
/**
* #author Alexander Farkas
* v. 1.22
*/
(function ($) {
if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8
var oldCurCSS = $.curCSS;
$.curCSS = function (elem, name, force) {
if (name === 'background-position') {
name = 'backgroundPosition';
}
if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if (!force && style && style[name]) {
return style[name];
}
return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
};
}
var oldAnim = $.fn.animate;
$.fn.animate = function (prop) {
if ('background-position' in prop) {
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if ('backgroundPosition' in prop) {
prop.backgroundPosition = '(' + prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
};
function toArray(strg) {
strg = strg.replace(/left|top/g, '0px');
strg = strg.replace(/right|bottom/g, '100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
}
$.fx.step.backgroundPosition = function (fx) {
if (!fx.bgPosReady) {
var start = $.curCSS(fx.elem, 'backgroundPosition');
if (!start) {//FF2 no inline-style fallback
start = '0px 0px';
}
start = toArray(start);
fx.start = [start[0], start[2]];
var end = toArray(fx.end);
fx.end = [end[0], end[2]];
fx.unit = [end[1], end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
};
})(jQuery);