I would like to adapt the initial page of my mvc 5 web site (bootstrap template) after the user has logged on. After the login a new section will appear on the main page and I would like to change the class of all the other tags in order to fit better the content of the home page.
Here is the code I've added to my page:
#using Microsoft.AspNet.Identity
#{
ViewBag.Title = "Home Page";
}
<div class="jumbotron" style="background-color: lightblue">
<table>
<tr>
<td style="width: auto"><img src="~/Images/aaaa.png" /></td>
<td style="width: 5%"> </td>
<td align="left" valign="bottom"><h1>Title</h1></td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3" align="left"><p class="lead">Description</p></td>
</tr>
</table>
</div>
<div class="row">
<div id="div1" class="col-md-4">
<h2>Menu1</h2>
<p>
BLA BLA BLA
</p>
<p>#Html.ActionLink("Leggi >>>", "Action1", "Controller1", new { }, new { target = "_self" })</p>
</div>
<div id="div2" class="col-md-4">
<h2>Menu2</h2>
<p>BLA BLA BLA</p>
<p>#Html.ActionLink("Leggi >>>", "Action2", "Controller2", new { }, new { target = "_self" })</p>
</div>
<div id="div3" class="col-md-4">
<h2>Menu 3</h2>
<p>BLA BLA BLA</p>
<p>#Html.ActionLink("Leggi >>>", "Action3", "Controller3", new { }, new { target = "_self" })</p>
</div>
#{
if (Request.IsAuthenticated)
{
<div id="div4" class="col-md-3">
<h2>Menu 4</h2>
<p>BLA BLA BLA BLA</p>
<p>Leggi >>></p>
</div>
#Scripts.Render("~/bundles/jquery")
<script>
$(document).ready(function () {
$(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");
});
</script>
}
}
</div>
The problem is that this code doesn't work. The class applied to objects is not changed.
What am I doing wrong? Please, someone can help me?
Thanks in advance.
You are looking for class in jQuery that is not present in html code. In html you have col-md-4 for instance <div id="div1" class="col-md-4"> instead of col-mod-4 which you are looking in jquery code. Check what class you have in css and change the html/css accordingly. I assume you have col-md-3 instead of col-mod-3
Change
$(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");
To
$(".col-md-4").removeClass("col-md-4").addClass("col-md-3");
You may also try with following:
$(".oldclass").attr('class','').addClass("newclass");
Related
I am dragging and dropping 3 div's(div tag). one div tag contain object tag in side div tag, in that object tag i'm displaying PDF file. when page loads object tag display's PDF file, after drag and drop object tag will not show pdf file, object tag is blank.
HTML CODE
/* Display Box1*/
<div class="parent">
<div class="box child" id="child3">
<div class="box-header">
<h3 class="box-title">Information From Document Archive</h3>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; padding-left: 5px; max-height: 250px;">
<div style="z-index: -999;">
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
</div>
</div>
</div>
</div>
/* Display Box2 */
<div class="row">
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child1">
<div class="box-header">
<h3 class="box-title">Information From AI Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; max-height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 200px;">Field</th>
<th>Value</th>
</tr>
<tr>
<td>Permission Note</td>
<td><span class="text-red">
<asp:Label ID="lblPermissionNote" runat="server" Text="abcd"></asp:Label>
</span></td>
</tr>
<tr>
<td>Customer Comments</td>
<td><span class="text-red">
<asp:Label ID="lblCustomerComments" runat="server" Text="Test comments"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child2">
<div class="box-header">
<h3 class="box-title">Information From Mainframe Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
<tr>
<td>Consignment Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameConsigmentNumber" runat="server" Text="1234556789"></asp:Label>
</span></td>
</tr>
<tr>
<td>Account Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameTntAccountNumber" runat="server" Text="123456"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
JQuery Code
$("document").ready(function () {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function (event, ui) {
if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}
$(this).append($(ui.draggable));
}
});
});
CSS
.parent {
/*float: left;*/
cursor: move;
border: 2px dotted silver;
}
Web Page Before Dragging
Web Page after dragging
Please suggest any solution.
Found solution. Instead of using <object> tag i used <iframe> tag. it worked for me.
Before:
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
Changed To:
<iframe src="file/DRAG.pdf" class="col-sm-12" style="height:300px;" frameborder="0"></iframe>
I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:
https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0
When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
VISUALIZZAZIONE OFFERTE ABITATIVE
<small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
</h2>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
{$sizeOffers = count($offers)}
{if $sizeOffers gt 0}
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
{else}
<div class="alert alert-warning">
Non c'รจ nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
</div>
{/if}
<hr>
<div class="text-center">
Aggiugi un'offerta
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
</div>
</div>
</div>
</div>
</div>
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>
As you can see, offers.tpl is an included file and contains:
<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>
Can you help me?
Create responsive tables by wrapping any .table in .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
I am trying to create loader for my website but it is not working .I am using turbolinks classic for this operation.The loader loads after the page load which i don't want .I need when page is loading that time i need my loader to load and when the page gets load the loader should get disappear both things are not working.Here is my code
<div id="content-wrapper">
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
<div class="row">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="clearfix">
<div class="common_page gsb1">
<div class="hdr">
<div class="row">
<div class="col-md-3">
<h4>Dashboard</h4>
</div>
<div class="col-md-5">
</div>
<div class="col-md-4 pull-right">
<%=render 'common/date'%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="table-responsive custom-bg">
<table class="custom-table" cellspacing="0">
<tr>
<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0">
<tr>
<td> Name</td>
<td>Email </td>
</tr>
<tr></tr>
<%#dashboard.each do |dashboard|%>
<tr>
<td><b><%=dashboard[:NAME]%></b></td>
<td><%=dashboard[:email]%></td>
</tr>
<%end%>
</table></td>
</tr>
</table>
<%= will_paginate #dashboard %>
</div>
</center>
<%=render 'common/footer'%>
</div>
<script>
$("#retailer").attr("class","active")
$(document).on('page:load', function(event) {
$('.loader img').css("display","none");
});
</script>
But the loader is not loading the image Can anyone tell me how to do that.And I don't want to use ajax for this thing
set display to block initially :-
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
or just
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>
and remove
$(document).on('page:before-unload', function(event) {
//remove $('.loader img').css("display","block");
});
As a result,the loader image will be not visible after document is loaded fully but is visible till then
I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.
http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]
I'm having trouble assigning some variables as within a closure scope of a javascript class/jQuery plugin.
When I move into Article.initObj() as in the constructor of the Article class, I can't see either domElement or settings in my closure scope, but I can see me and testVar. This is confusing me quite a lot. Can anyone shed some light on what be might going on here?
EDIT: I've tried this in both firefox and chrome.
Here's my HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="ArticleNav.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Init our Viomedia article graph
var articleList = $("#entityList").children().ArticleNav();
});
</script>
</head>
<body>
<div id="leftPanel" class="vpanel">
<div id="#search">
<label for="searchField">Search </label>
<input style="float: right;" name="searchField" id="searchField"/>
</div>
<div id="tree">
</div>
</div>
<div id="rightPanel" class="vpanel">
<div id="entityList" >
<div class="article program" id="1">
<div class="title">The Simpsons</div>
<div class="article playlist" id="2">
<div class="title">Classic Episodes</div>
<div class="article episode" id="6">
<div class="title">Homer the Heretic</div>
</div>
</div>
<div class="article season" id="3">
<div class="title">Season 4</div>
<div class="article episode" id="4">
<div class="title">Kamp Krusty</div>
</div>
<div class="article episode" id="5">
<div class="title">A Streetcar Named Marge</div>
</div>
<div class="article episode" id="6">
<div class="title">Homer the Heretic</div>
</div>
<div class="article episode" id="7">
<div class="title">Lisa the Beauty Queen</div>
</div>
</div>
</div>
<div class="artist article" id="7">
<div class="title">Electric Light Orchestra</div>
<div class="article album" id="8">
<div class="title">The Essential Electric Light Orchestra</div>
<div class="article album" id="9">
<div class="title">Disc 1</div>
<div class="article track" id="10">
<div class="title">So Serious</div>
</div>
</div>
<div class="article album" id="11">
<div class="title">Disc 2</div>
<div class="article track" id="12">
<div class="title">Last Train to London</div>
</div>
</div>
</div>
</div>
<div class="program article" id="13">
<div class="title">Archer</div>
</div>
</div>
</div>
</body>
</html>
Here's my jQuery plugin:
(function($){
var Article = function (element, options)
{
var me = this;
var testVar = "I can read this";
var domElement = $(element);
var settings = $.extend({}, options || {});
this.initObj = function()
{
me.test();
};
this.test = function()
{
console.log(testVar);
};
this.initObj();
};
var construct = function(element) {
var element = $(element);
// If this element already has this plugin attached to it.
if(element.data('Article')) {
return;
}
var ArticlePlugin = new Article(element);
element.data('Article', ArticlePlugin);
};
$.fn.ArticleNav = function(func) {
return this.each(function()
{
switch (func) {
default:
construct(this);
break;
}
});
};
}( jQuery ));
domElement is available from .initObj() from the parent closure scope. Did you actually try to use it or did you just not see it in the debugger?
If you are stepping through initObj() in the debugger, you won't see domElement as a local variable in the debugger because it is in a higher scope, but if you do an explicit watch on it, you will be able to see it. If you write code in initObj() that references it, it will work.
Same for settings.