I have just installed perfect scroll, the jQuery plugin, and it works great but I can't find a parameter to start the content at the bottom of my div. I want to have to scroll up on page load, not to have to scroll down.
Normally with jQuery I would just do:
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
But that seems to have no effect.
Current code:
$(".chat_person").click(function ()
{
if (!$(".chat_content_wrap").is(":visible"))
{
$(".chat_content_wrap").fadeIn(300, function ()
{
$('#message_list').perfectScrollbar('update');
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
});
}
});
$("#message_list").perfectScrollbar();
I haven't used the plugin before but based on the docs at https://github.com/noraesae/perfect-scrollbar
The code you should need is:
$("#message_list").scrollTop( $( "#message_list" ).prop( "scrollHeight" ) );
$("#message_list").perfectScrollbar('update');
The $ selectors may be wrong since I can't see you HTML code.
Scrooltop
paste below JavaScript code just before </head> code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
paste below JavaScript code just <body> code.
<div class="scrool">
<script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<img src="http://static.tumblr.com/cqpvki8/7yWlh05zn/seta.png" title="Go to Top" alt="Go to Top"/>
</div>
Now on the Customize page, Go and Hit the button “Edit HTML” and add below css codes just before
#scrollToTop:link,
#scrollToTop:visited {
display: none;
position: fixed;
top: 20px;
right: 20px;
}
For reference http://www.tumblings.net/post/38379026809/scrolltotopbuttoncode
Use this code
Related
So i'm trying to add a responsive iframe to the inside of a dialog box..
Here is my starting point: Fiddle 1 which simply shows a button that on click displays an iframe. The iframe however isn't responsive and doesn't resize with the page.
Using the guidance from here I've made use of some nice CSS container styling to make the iframe responsive. Also using the iframe class I can set the height to 120% which clips off the botton of the iframe display (which I want). Here is the Fiddle 2
Finally I'm trying to move the second Fiddle code into a jQuery dialog box. I'm able to add the iframe so the content is responsive however it looks like the iframe class is not being applied and you can still see the bottom of the iframe display showing within the dialog. Fiddle 3
I need the dialog box to show the same as what's in Fiddle2 (responsive without the iframe footer)
...any ideas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<title>iframe</title>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type="button" id="btn1">Button 1</button>
<div id="iFrameDiv" class="iframe-container">
<iframe style="display:none;" id="myframe1" src="https://app.powerbi.com/view?r=eyJrIjoiMjJlYTYwODktYjU2NS00ZjZiLTg1YTktNDRlZjgzNzFmN2U5IiwidCI6ImRjOWNhZGMxLTJhZTItNGM0YS04MzIwLThlOTViMDAzNGI5NiJ9" ></iframe>
</div>
</body>
</html>
$( "#myframe1" ).dialog({
autoOpen: false,
resizable: true
});
$( "#btn1" ).click(function() {
$( "#myframe1" ).dialog( "open" );
});
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 120%;
left: 0;
position: absolute;
top: 0%;
width: 100%;
}
When jQuery UI creates a dialog box, it copies the dialog content in a separated part of the DOM. Therefore your selector targetting the parent doesn't apply.
Check this Fiddle: http://jsfiddle.net/0h6a3epo/1/
I'm using the parent now as the dialog element, that applies the CSS.
Apart from that, I've added another jQuery line to show the iframe because jQuery UI was applying CSS display:none;by default.
Code Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
</div>
<div id="fullsite"></div>
</body>
</html>
jQuery:
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $("#fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('#intro').hide(2000);
});
Simple CSS:
body {
overflow: hidden;
}
Hi everyone, I am not a jQuery expert. I am the beginner. So, I have a problem. I have two div wraps, one for the intro and one for full site. I am making a site like this, When I will open my site in a browser only the top #intro div will visible and the full site will hidden. I am using the overflow: hidden; to hide everything other side of the computer screen. I have a control in the #intro div screen to unlock the full site. So, When I will click in the control the site will scroll to #full-site. I am doing it using query and I am adding $('html, body').css('overflow', 'auto'); to show the hidden part of the site. Also, I am adding $('#intro').hide(2000); to hide the top #intro.
At this time top #intro is hiding and the scroll effect is working. But the #intro div content going left side, right side when the #intro is hiding and the scroll effect is not going targeted id. It's going very down from the targeted div. How can I do the work properly?
You wrote #fullsite in your javascript, but <div class="fullsite"></div> in your HTML.
You need to change your HTML as <div id="fullsite"></div>.
The same error for intro.
Remember: for accessing to ID you should prefix with #, for classes you should use ..
You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/
In your case I prefer the solution based on "id" and not on "classes". Infact any valid HTML document can contain many elements using the same class, but shouldn't exist more element with the same id.
This means that $(".aaa") will return a list containing any element with aaa class, but $("#aaa") will return the only element with aaa id.
is this how you want to run the code
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $(".fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('.intro').hide(2000);
});
.container {
overflow: hidden;
height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="intro">
go to fullsite
</div>
<div class="fullsite">this is fullsite</div>
</div>
</div>
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:
http://oxfordandregentstreet.com/
Now this is the code I made for it:
On the header I put this function
enter code here
On the header I put this function
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(){
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(){
jQuery(".vid1").hide();
});
});
</script>
enter code here
CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}
.videos{
position: relative;
display: none;
}
.play1{
position: relative;
bottom: 9em;
left: 8em;
}
enter code here
HTML code on the page:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<table border="0" align="center">
<tbody><tr>
<td><img src="/wp-content/uploads/2015/02/Constant-Contact- 290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt="" width="" class="play1"></td>
</tr>
</tbody></table></div>
<div class="videos">
<div class="vid1">Close X<iframe width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw" frameborder="0" allowfullscreen></iframe></div>
</div>
I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.
Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.
Thanks in advance :)
There's a few issues I can see:
CSS
Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:
.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
position: absolute;
bottom: -1.5em;
left: .3em;
display: none; /* added here */
}
Code
The play button class is play1 so, your code to show vid1 should be:
jQuery(".play1").click(function (e) {
e.preventDefault();
jQuery(".vid1").show();
});
The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:
jQuery(".vid1 .closevid").click(function (e) {
e.preventDefault();
jQuery(".vid1").hide();
});
Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(e){
e.preventDefault();
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(e){
e.preventDefault();
jQuery(".vid1").hide();
});
});
</script>
(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Ref: http://learn.jquery.com/about-jquery/how-jquery-works/
(2) Inside the jQuery document.ready wrapper, put an alert.
<script type="text/javascript">
jQuery(document).ready(function(){
alert("It works");
});
</script>
If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.
Make just that one thing work, then add back in the other parts, bit by bit.
I would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-custom-link').click(function(){
$(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
return false;
});
$(document).on('coinbase_payment_complete', function(event, code){
console.log("Payment completed for button "+code);
window.location = "/confirmation.html";
});
});
</script>
</body>
</html>
However it does not work. Any ideas why?
'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.
I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.
The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much
Ask a friend to test your code, it should work for other people.
I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:
wait for the ban from coinbase.com to expire
contact support about it
don't do anything, it's working, but not for you
Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).
Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>
<script src="https://coinbase.com/assets/button.js"></script>
<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 140px!important;
height: 18px!important;
margin-left: 7px;
margin-top: 10px;
/*
debugging_code: uncomment_to_show_the_button;
opacity: 0.5;
outline: 1px solid red;
*/
}
</style>
*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.
Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.