My HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<section class="dropdown-text">
<p><%= link_to "My text", "#", id: "text-link" %></p>
<div id="my-text">
my text
</div>
</section>
</body>
</html>
.coffee:
$(document).on "ready page:load", ->
$("section.dropdown-text").on "click", "#text-link", ->
$("#my-text").fadeToggle()
e.preventDefault()
If I click on the link nothing happens. I assume the mistake is silly but I just can't find it. Also happy to provide more details if necessary.
Look at your code:
<**/**section class="dropdown-text">
<%= link_to "My text", "#", id: "text-link" %>
my text
The "section" element is not enclosed correctly.
Related
When I open chrome developer console and type:
document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML = "Steven"
the text "Third" changes to "Steven".
There are two child elements of HTML, the head and the body. So, why doesn't the code 'firstElementChild' target the the head element, since that's the first element?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<input type="checkbox">
<button style=":active color:red;">Click Me</button>
<ul>
<li class="list">
Google
</li>
<li class="list">Second</li>
<li class="list">Third</li>
</ul>
</body>
</html>
[Screenshot of the site][1]-->
[1]: https://i.stack.imgur.com/Lwfmt.jpg
I want to use datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/index.html with Bootstrap 4.
Following the examples on above page, I can make it work with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Using this code datepicker appears correctly.
But doing the same with Bootstrap 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Makes it look less professional:
Looks like font and spacing are messed up in Bootstrap 4 version.
How can I get same look and feel of datepicker in Bootstrap 4?
Thanks
You can too override default datepicker classes like the following:
the default bootstrap font size is 1rem or 16px so update .datepicker class
font-size: 0.875em; or/and update the cell width and height:
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
// solution 1:
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
From documentation:
bootstrap-datepicker.standalone.css
can be used to include the datepicker without depending on the Twitter Bootstrap library.
You can try out https://github.com/satyandra-softuvo/bootstrap4-datetimepicker
$.extend(true, $.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
I have problems with the ModalPopupExtender.
I set the targetcontrolid to a hidden field and calls the show method from code behind. Every thing works fine until the 10th time i call the show method. Then it suddenly stops working. The "dialog" is no where to be seen. The controls on the page no longer gets disabled. The code behind get called when i click the button that is calling the show method but calls to the show method has no effect.
I use Visual Studio 2010
Here is my aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MessageBoxTest.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTest" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TestButton" Text="Test" OnClick="TestButton_OnClick" />
<asp:HiddenField runat="server" ID="_Hint"/> <%--Brukt til å vite hvorfor denne dialogen ble kalt.--%>
<asp:HiddenField runat="server" ID="_Parameters"/> <%--Her lagres parameterdata som en Json string.--%>
<asp:Button runat="server" ID="_dummy"/>
<asp:Panel runat="server" ID="MessageBoxPanel">
<asp:Panel runat="server" ID="MessageBoxBorderPanel" BorderColor="LightGray">
<div class="dialogheader">
<div style="text-align: center; float: left">
<asp:Label runat="server" ID="lbHeader"></asp:Label>
</div>
<div style="float:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Icons/Small/navigate_cross.png" />
</div>
<div style="clear:both"></div>
</div>
<div class="dialogbody" style="min-height: 50px">
<asp:Label runat="server" ID="lbBody"></asp:Label>
</div>
<div class="dialogbody" style="text-align: center">
<asp:Button runat="server" ID="OKButton" Text="OK" OnClick="OnOkClicked"/>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="MessageBoxPopupExtender" TargetControlID="_dummy" PopupControlID="MessageBoxPanel" RepositionMode="RepositionOnWindowResizeAndScroll" PopupDragHandleControlID="MessageBoxBorderPanel" DropShadow="True" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The masterpage containing the script manager:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SeceOfC2.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script language="JavaScript1.2" src="/scripts/jquery-1.4.1.js" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
window.onresize = function(event) {
var height = $(window).height();
var width = $(window).width();
$.ajax({
url: "/HttpHandlers/getwindowsize.ashx",
type: "POST",
data: {
Height: height,
Width: width,
selectedValue: selectedValue
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// do stuff
}
});
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
SenseOfC Drill execution prototype
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Content/Users/DrillView.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/Administrators/TreatmentView.aspx"
Text="Admin" Value="Admin"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
and here is my code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using SeceOfC2.Dialogs;
using SeceOfC2.Tools;
namespace SeceOfC2.TEST
{
public partial class MessageBoxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TestButton_OnClick(object sender, EventArgs e)
{
Show("TEST", "TEST");
}
public void Show(string caption, string message, string hint = "", MessageBox.Buttons buttons = MessageBox.Buttons.Ok)
{
_Hint.Value = hint;
_Parameters.Value = JsonHelper.Serialize("");
lbHeader.Text = caption;
lbBody.Text = message;
MessageBoxPopupExtender.Show();
}
protected void OnOkClicked(object sender, EventArgs e)
{
}
}
}
If i set the TargetControlID to a visible control. The ModalPopupExtender still works, but no code behid is called, obviously, preventing me from puting any data in to the fields in the dialog.
Update:
I have testet in a standard aspx page (no masterpage):
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MessageBoxTestNoMaster.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTestNoMaster" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TEST" Text="Test" OnClick="TEST_OnClick"/>
<uc:MessageBox runat="server" ID="MessageBox" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
The dialog has been moved to a usercontrol:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MessageBox.ascx.cs" Inherits="SeceOfC2.Dialogs.MessageBox" %>
<asp:HiddenField runat="server" ID="_Hint"/> <%--Brukt til å vite hvorfor denne dialogen ble kalt.--%>
<asp:HiddenField runat="server" ID="_Parameters"/> <%--Her lagres parameterdata som en Json string.--%>
<asp:HiddenField runat="server" ID="dummy"/>
<asp:Panel runat="server" ID="MessageBoxPanel">
<%--<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="MessageBoxBorderPanel" Opacity="0.1" Radius="10"/>--%>
<asp:Panel runat="server" ID="MessageBoxBorderPanel" BorderColor="LightGray">
<div class="dialogheader">
<div style="text-align: center; float: left">
<asp:Label runat="server" ID="lbHeader"></asp:Label>
</div>
<div style="float:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Icons/Small/navigate_cross.png" OnClick="OnCloseClicked" />
</div>
<div style="clear:both"></div>
</div>
<div class="dialogbody" style="min-height: 50px">
<asp:Label runat="server" ID="lbBody"></asp:Label>
</div>
<div class="dialogbody" style="text-align: center">
<asp:Button runat="server" ID="OKButton" Text="OK" OnClick="OnOkClicked"/>
<asp:Button runat="server" ID="CancelButton" Text="Avbryt" OnClick="OnCancelClicked"/>
<asp:Button runat="server" ID="YesButton" Text="Ja" OnClick="OnYesClicked"/>
<asp:Button runat="server" ID="NoButton" Text="Nei" OnClick="OnNoClicked"/>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="MessageBoxPopupExtender" TargetControlID="dummy" PopupControlID="MessageBoxPanel" RepositionMode="RepositionOnWindowResizeAndScroll" PopupDragHandleControlID="MessageBoxBorderPanel" DropShadow="True" />
At this point there is no reference to the css classes used so the dialog looks a bit naked, but it works!! I can show and hide the dialog as many times as I want.
Update 2:
Link to the css-file is no problem. Now the dialog looks as it should.
Upate 3:
Tried to move the reference to scriptmanager from masterpage to page. Same result. Does not work.
Update 4:
Removed the refrecence to css file. The message box now works.
Update 5:
I'm not quit there yet but a bit longer than just a few minutes ago.
The problem seems to be connected to the standard asp. web application you get out of the box from Visual Studio 2010 and the CSS file you get located in the Styles catalog. I will try to fiddle a bit with it and maybe I can figure out what is chrasning with the ModalPopupExtender.
After deactivating some more of the classes in the css files
The message box is suddenly placed behind the other stuff in the form and its no longer modal. I can click on any part of the form I want and events geting fired.
Update 6:
I have reproduced the error without masterpage and only a singel styling element:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MessageBoxTestNoMaster.aspx.cs" Inherits="SeceOfC2.TEST.MessageBoxTestNoMaster" %>
<%# Register tagName="MessageBox" tagPrefix="uc" src="~/Dialogs/MessageBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.page
{
width: 960px;
background-color: #fff;
margin: 20px 0px;
border: 1px solid #496077;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="page">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="TEST" Text="Test" OnClick="TEST_OnClick"/>
<uc:MessageBox runat="server" ID="MessageBox" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This is what it looks like without master page and only one style element
The dialog is visible but hiding behind the div with class "page". Hapens after 10 calls to show method. The modal functionality is no longer active and I can click both the ok button in the dialog and the button in the form that is calling the show method.
I was having this same problem with the AjaxControlToolkit 15.4.1 ModalPopupExtender, and what solved it for me was (1) making sure all buttons were in a PostBackTrigger tag, i.e.:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnDownload" />
</Triggers>
</asp:UpdatePanel>
... and then also (2) removing the "CancelButtonID" property if it existed and using an actual button click or command event to hide the extender.
I wish I could say why this worked, but I don't know enough about the control toolkit to say... hope that helps!
I am trying to write some appendChild() method but I am stuck here. It seems working but not displaying the result. Not sure what I am missing:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="appendChild().aspx.cs" Inherits="DomExample_appendChild__" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList">
<li>Books</li>
<li>Pen</li>
<li>Paper</li>
</ul>
<button onclick="myFunction()">Click here...</button>
</div>
</form>
<script>
function myFunction() {
var x = document.createElement("Li");
var y = document.createTextNode("Pad");
x.appendChild(y);
document.getElementById("myList").appendChild(x);
}
</script>
</body>
</html>
I am guessing that the script is running correctly, but the form is also being submitted right after and page refreshes to the initial state. Try this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="appendChild().aspx.cs" Inherits="DomExample_appendChild__" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList">
<li>Books</li>
<li>Pen</li>
<li>Paper</li>
</ul>
<button onclick="myFunction(event);">Click here...</button>
</div>
</form>
<script>
function myFunction(e) {
e.preventDefault();
var x = document.createElement("Li");
var y = document.createTextNode("Pad");
x.appendChild(y);
document.getElementById("myList").appendChild(x);
}
</script>
</body>
</html>
...or you can implicitly define button type as "button" rather than default "submit" type:
<button onclick="myFunction()" type="button">Click here...</button>
I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>