I have followed different solution here in stacj overflow with regards to coinslider not moving. So here's mine. It seems that I dont know how to make it move.
here's my code.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="LeavemanagementFinal.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CrossXTrain - Home</title>
<link href="css/master.css" rel="stylesheet" />
<link href="css/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<%--<style type="text/css">
.frame
{
font:12px arial;
width:200px;
height:200px;
border:none;
overflow:hidden;
border:1px solid black;
padding:5;
}
</style>
<script language="javascript">
i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) { i = 0 }
t1 = setTimeout("scroll()", 10)
}
</script>--%>
</head>
<body onload="scroll()">
<div class="divpage">
<img src="images/header2.png">
<div class="divmenu">
<a class="FontStaticMenuItemStyle" href="index.aspx"> Home</a>
<a class="FontStaticMenuItemStyle" href="leavemanagementlogin.aspx"> Leave Management</a>
<a class="FontStaticMenuItemStyle" href="news.aspx"> News</a>
<a class="FontStaticMenuItemStyle" href=""> Articles</a>
<a class="FontStaticMenuItemStyle" href="aboutus.aspx"> About Us</a>
<a class="FontStaticMenuItemStyle" href="contactus.aspx"> Contact Us</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
<div class="mainbanner" id="news" >
<img src="images/BUBLES.jpg" />
<img src="images/CrossXtrain.jpg"/>
<img src="images/CrossXtrain3.jpg"/>
<img src="images/CrossXtrain4.jpg"/>
<img src="images/CrossXtrain5.jpg"/>
<img src="images/CrossXtrain6.jpg"/>
<img src="images/CrossXtrain7.jpg"/>
<img src="images/CrossXtrain8.jpg"/>
<img src="images/CrossXtrain9.jpg"/>
</div>
<div class="clear"> </div>
<div class="mainadfooter">
<input type="image" class="secondinput" src="images/BUBLES.jpg"/>
<input type="image" class="thirdinput" src="images/HCS.jpg" onclick="javascript: window.location.href = 'http://www.healthcaresynergy.com/'"/>
<input type="image" class="thirdinput" src="images/fusionplus.png" onclick="javascript: window.location.href = 'http://sync.fusionpl.us//'"/>
<input type="image" class="thirdinput" src="images/DoubleRule_Logo#2x.png" onclick="javascript: window.location.href = 'http://www.doublerule.com/'"/>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
<div class="footer"><p>Copyright © 2014. CrossXTrain Company Inc. All rights reserved. | Leave Management System - ISD (Php)</p></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#news').news();
});
</script>
Thank you so much all.
Your script needs to be inside the html tags.
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
I will try to keep it simple in database I have 2 fields, name = name of site and html = html code of that site.
Database looks like this:
UPDATE `websites` SET `name` = 'name', `html` = ' <title>Template 1</title> <link href="http://localhost/templates/css.css" rel="stylesheet" type="text/css"> <div class="logo"> <img class="images" id="image" src="#" alt="Your Logo"> </div> <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative; left: 209px; top: 139px;"><p>Change Text inside this box</p></div> <div id="editTxt" class="refresh" contenteditable="true"> <p>This text can be by the user.</p> </div> ' WHERE `websites`.`id` = 1;
Now when I type into browser localhost/website/{name} I would like to append html code from that database into a browser using ajax.
I have started something like this:
Controller:
function websites($name)
{
$websites = Website::all();
return view('layouts/website', ['websites' => $websites]);
$name = $websites->name;
}
Route:
Route::get('website/{name}', 'BuilderController#websites');
website.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="container template_class ">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
<img src="{{ asset($website->html )}}"/>
</a> #endforeach
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
Can anyone help me get started?
You're wanting to Displaying Unescaped Data:
By default, Blade {{ }} statements are automatically sent through
PHP's htmlentities function to prevent XSS attacks. If you do not want
your data to be escaped, you may use the following syntax:
{!! $website->html !!}
I'm trying to use the Slick.js carousel in responsive display with the Magnific Popup Lightbox.
It's working when the slick slider is in its basic form, but when the window is tight enough to trigger the breakpoint and that the "slides to show" are fewer, the Magnific Popup doesn't work anymore, just opening the linked picture in a new thumbnail and I have to reload the page to make it work again...
Here is my code :
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/slick.js"></script>
<script type="text/javascript" src="js/responsee.js"></script>
<!--Projet Un-->
<div class="proj_block">
<div>
<div class="margin line">
<div class="slick_slide s-12 l-6-slick center">
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!--Fin Projet Un-->
<!--Projet Deux-->
<div class="proj_block">
<div>
<div class="margin line">
<div class="slick_slide s-12 l-6-slick center">
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!--Fin Projet Deux-->
/*SLICK SLIDE*/
<script type="text/javascript">
$(document).ready(function() {
$('.slick_slide').slick({
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 860,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 540,
settings:{
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
/*FIN SLICK SLIDE*/
/*MAGNIFIC POPUP*/
<script type="text/javascript">
$(document).ready(function() {
$('.proj_un').magnificPopup({
gallery: {
enabled: true
},
removalDelay: 300,
mainClass: 'mfp-fade'
});
$('.proj_deux').magnificPopup({
gallery: {
enabled: true
},
removalDelay: 300,
mainClass: 'mfp-fade'
});
});
</script>
/*FIN MAGNIFIC POPUP*/
Here's the link to the beast : http://madbook.net/mad/help/index-test.html
I'm really not an expert in this, so I hope you won't scream and cry seeing all this...
It would be great if you could lead me on the good way, because I can't see where the problem comes from...
Thanks
Mad
First, I forgot, but here is the js for Slick : https://github.com/kenwheeler/slick/blob/master/slick/slick.js
Actually, I found that domNode where destroyed every time a breakpoint was passed.
I simply removed calls of the refresh function (containing the destroy one) in the checkResponsive function and it's working...
I don't know if it could create other problems though...
I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>