Am trying to get the focus of my chat messages top the newest, at the bottom of the page but the scroll automatically goes to the top.Here is my code:
js:
$(document).ready(function){
$('#GridDiv').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
})
}
html:
{{ extend 'layout.html' }}
<head>
<title>Britam Intell Services</title>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/index.css')}}">
<script src="index.js" language="javascript" type="text/javascript"></script>
</head>
<div class="well" id="GridDiv">
<div class="chatbox">
<div class="chatlogs">
<div class="chat">
{{for reply in replies:}}
<div class="chat self">
<div class="user-photo"><img src="{{=URL('static','images/userOne.png')}}"/></div>
<p class="chat-message">
<small>{{=prettydate(reply.created_on)}}</small>
{{=XML(reply.quest.replace('\n','<br>'))}}
</p>
</div>
</div>
<div class="chat">
<div class="chat friend">
<div class="user-photo"><img src="{{=URL('static','images/userTwo.png')}}"/></div>
<p class="chat-message">
{{=XML(reply.message.replace('\n','<br>'))}}
</p>
</div>
{{pass}}
</div>
</div>
{{=form.custom.begin}}
<div class='chat-form'>
<textarea name="message"></textarea>
<button>
Send
</button>
</div>
{{=form.custom.end}}
</div>
</div>
is there a way i can cod this to function properly to look like this with the newest message at the bottom:
It seems that when the click fires the document is not completely loaded (especially images) so the height is not the final one.
You could check the document height with a console.log inside the click handler.
Try to put the animation code line inside a timer, in order to get it executed after a page repaint.
setTimeout(function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}, 100};
Related
Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :
Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>
Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>
there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>
Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .
I have this slide out panel with a comment form in it, after user submitted the comment form, a "THANK YOU" will appear, the problem is, after I close the panel, and slide it out again for a second comment, the "THANK YOU" is still there! I was hoping to see a new unfilled comment form.
How do I have a fresh new original comment form to show up instead of the leftover from previous session?
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("comment.pl", {
comment:$("#comment").val(),
},
function(data,status){
document.getElementById('div2').innerHTML = "THANK YOU";
});
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect.</p>
Slide to Dialog Page
</div>
</div> <!-- pageone -->
<div data-role="popup" data-dialog="true" id="pagetwo" >
<div data-role="main" class="ui-content">
<div id="div2">
<b>Enter Comment</b>
<br>
<textarea name="comment" id="comment" data-role="none" rows=5 cols=30 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,100);" onKeyUp="limitText2(this,100);" style="resize:none;"></textarea>
<br>
<button data-inline="true"><font size=+2 color=#333333>Enter</font></button>
Go to Page One
</div> <!-- div2 -->
</div> <!-- ui-content -->
</div> <!-- pagetwo -->
</body>
</html>
Instead of changing the content of the div2, it would be better to .append or .show an element. If we recreate the contents of div2 at runtime, we would need to reapply all the JS over this new code, in order to refresh it and make it able to post the data properly.
So, create a #success div that appears when the button is clicked:
...
function(data,status){
$('#success').show();
});
...
There is an event that runs when an page transition animation is complete:
$( document ).bind( "mobileinit", function() {
$('div[data-role="main"]').live('pagehide',function(event, ui){
//the 'pageHide' happens when the main is hidden
$('#success').hide();
});
});
Problem is to show/hide requested specific page from among pages in the html. The code I tried is shown below. Can any one point me the right direction. I n the blow code I tried to show only pagethree, but it displayed pageone.
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script>
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>page one</h1>
</div>
<div data-role="main" class="ui-content">
<p>page one contents </p>
</div>
<div data-role="footer">
<h1>page one</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>page two</h1>
</div>
<div data-role="main" class="ui-content">
<p>page two contents</p>
</div>
<div data-role="footer">
<h1>page two</h1>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>page three</h1>
</div>
<div data-role="main" class="ui-content">
<p>page three contents...</p>
</div>
<div data-role="footer">
<h1>page three</h1>
</div>
</div>
</body>
</html>
To prevent page from showing or redirect a user before next page is shown, you need to listen to pagebeforechange event. This event fires before changing page transition is commenced and URL History is updated.
When pagebeforechange is emitted, it omits a data object holding details of previous and next page. Use this data to determine from and which pages the user is navigating.
$(document).on("pagebeforechange", function (e, data) {
var nextPage = data.toPage,
prevPage = data.options.fromPage;
if (typeof nextPage === "object" && typeof prevPage === "undefined") {
var page = nextPage[0].id;
if (page === "pageone") {
$.mobile.changePage("#pagethree", {
transition: "flip"
});
return false;
}
}
});
Using .show() or .hide() will get you nowhere. In addition, refrain from using .ready() or $(function () {}); in jQuery Mobile and use Page Events instead.
Demo
Try to put your code inside pagecreate event:
Triggered when the page has been created in the DOM (via ajax or
other) and after all widgets have had an opportunity to enhance the
contained markup.
<script>
$(document).on('pagecreate', function() {
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>
<script>
$(document).ready(function()
{
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>
Hi everyone I need help with sections I'm using section-container auto with deep_linking;true
i also have data-slug to each tabs,
I have 3 tabs with images on them so basically i want to have a direct link access to each individual tabs to have a link on the homepage. I tried adding location.hash script, also tried the .on click and .trigger, and none of them works.
thanks a lot.
<body>
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><span>tab1</span></p>
<div class="content" data-slug="loans" data-section-content="">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><span>tab2</span></p>
<div class="content" data-slug="tab2" data-section-content="">
<h1>tab2</h1>
</div>
</body>
this is the The simplest way >>>>>> try this :
HTML
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p>
<div class="content" data-slug="loans" data-section-content="" id="panel1">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p>
<div class="content" data-slug="tab2" data-section-content="" id="panel2">
<h1>tab2</h1>
</div>
jquery
$(document).ready(function (){
$('#panel1').hide();
$('#panel2').hide();
$('#tab1').click(function(){
$('#panel1').show();
$('#panel2').hide();
});
$('#tab2').click(function(){
$('#panel2').show();
$('#panel1').hide();
});
});
Demo : here
you can use jquery UI library to make tabs and panels
try this code to figure out what is jquery ui tabs :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
to watch how it's look like see this fiddle
for complete reference see here
In simplest terms your markup would be a <ul> with your tabs, followed by a stack of containers for the content of those tabs. You current markup has them inside the same container, which is going to make the effect hard to pull off.
<ul class="tabs">
<li class="tab1">Tab Title</li>
<li class="tab2">Tab Title2</li>
</ul>
<div class="tab-content">
<p class="tab1">Content for tab 1</p>
<p class="tab2">Content for tab 2</p>
</div>
Here's a fiddle -- tweak the CSS as you see fit, but you really don't need JQuery UI just to build tabs.
Ive done it guys, i just added a script:
<script>
$(document).ready(function(){
$('section').removeClass('active');
var hash = window.location.hash;
if (hash !== '')
{
$('section'+hash).addClass('active');
}
});
it checks the hash in the url then sets the section class="Active".
thanks guys for all the replies.
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>