I'm trying to learn/figure out how to successfully play a youtube video within a Bootstrap modal with ekko-lightbox plugin attributes. I've managed to get the Vimeo link to work, but the YouTube link will not retrieve the video, and the button images (external links) do not appear. My work files are saved on my desktop/locally. Do I need to upload my files to an ISP in order for the YouTube and image links to work? I would also like to know how to make the videos play in the modal without having to rely on the internet. That way if I want to present a website concept and there is no internet access, I can still have functionality.
Here is the code as it appears in my index file. Only the Vimeo video link and static waterfall image links work. The button image links do not appear either. Please help!!!
<!DOCTYPE html>
<html>
<head>
<title>Mixed Lightbox Gallery in Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ekko-lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3 class="page-header" id="mixed-gallery">Mixed gallery</h3>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="row">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
</a>
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
</a>
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ekko-lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
</body>
</html>
Yes, you need to have your files on a server rather than locally for the Youtube videos and images to work. I experienced this as well and by inspecting the code I saw that the way the javascript was written, those assets are called as file:// rather than http:// when working locally. I thought maybe it had to do with relative links, but it's true even when using absolute URLs.
Since Youtube is dependent on an internet connection, I can't think of a way to load those videos without internet. Try using a locally stored video instead of Youtube video, if you're just concepting something out.
Related
I have an .epub file that does not have any effect or animation while user turns between the pages
I use Turn.js library for it be it does not work .I can not open it with eBook readers softwares.
Here is my Epub folder Directory
Before add Turn.js library
After add Turn.js library
And here is my chap_0001.xhtml Html code
<head>
<title>How to Win Every Argument</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
</head>
<body dir="auto">
<h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
<div class="offset">
<div class="flipbook-viewport"><!-- Added-->
<div class="container"><!-- Added-->
<div class="flipbook"><!-- Added-->
<div style="width: 100.0%;">
<img src="images/img_0001.png" alt="Picture #1"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<div style="width: 37.238758708043065%;">
<img src="images/img_0002.png" alt="Picture #2"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
<div style="width: 45.59848005066498%;">
<img src="images/img_0003.png" alt="Picture #3"/>
</div>
<!-- rest of pages -->
</div>
</div>
</div>
</div>
And here is my chap_0001.xhtml Js code
<!-- language: lang-js -->
//Added after using Turn.js library
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width: 922,
// Height
height: 600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['style/basic.css'],
complete: loadApp
});
I only copy library folders and change chap_0001.xhtml file . That's it.
Any help will be appreciated
I am not sure what particular issues you had with your script. One main issue is the extra spans you included in your html:
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
They were considered "pages" and therefor turn.js turned the page to blank span that does not have the same size as other elements.
Anyway, this is a working example with your html: JSFiddle Example
I could not include working code here because turn.js is served over http. I had to copy the entire code and paste into js part which is more than stackoverflow text limit
So I'm using https://sachinchoolur.github.io/lightgallery.js/ for my gallery and it's great.
When user clicks and image it opens and all is well.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
However, I have an edge case where I want the user to be able to press another image on the page to open the gallery.
Let's pretend it's this a tag
<a id="magic_start" href="">
I thought I'd be able to do this:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
I've also tried, click() and trigger('click') but they don't work.
I think because lightgallery.js is it's own man, so to speak.
But it does nothing. No errors, but does nothing.
Any suggestions?
Edit:
My current workaround is...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
But this takes a way from UX due to having to reload page.
The trigger function needs to be called on the img element, and not the outer a element.
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<a id="magic_start" href="#">CLICK TO OPEN</a>
<div id="lightgallery">
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
</div>
I am working on a website to view your stats from my Minecraft Pocket Edition server, and I am having a problem.
I have one div with the id "tabs-minigames" and in this div there are 4 boxes with icons, which are these "tabs", and this div is currently not shown (in css display none)
Now, I have a image at the top of the website that you should be able to click to show the div "tabs-minigames", and the tabs show, but don't disappear after clicking a second time. I cannot see what I am doing wrong.
I am using this function in jQuery to show and hide the minigames tab:
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
I don't see anything wrong with the function, and here is the HTML
<html>
<head>
<title>
View your stats - Legion PE
</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
</script>
</head>
<body>
<div id="tabs">
<div class="tabs-back">
<div id="tabs-middle">
<img id="sliderimg" src="graphics/slider.png" height="100" width="100" style="position: fixed;padding-left:20px;padding-top: 10px;" style="outline:none;cursor: pointer;"></img>
<div style="padding-left:150px;padding-top:25px;">
<div id="tab-light-box">
Legion PE
</div>
</div>
</div>
</div>
</div>
<div id="tabs-minigames" style="display: none;outline: none;">
<div class="tabs-minigame">
<img src="icons/kitpvp_fullsize.png" width="120" height="110" style="padding-left:15px;padding-top:20px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/spleef_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/bowandarrow_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/diamond_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
</div>
<center>
<div id="center">
</div>
</center>
</body>
</html>
You can see the website live here: http://legionpvp.eu/pe/login/stats.html
Thanks!
you don't have any element with id="div", and that's what you're binding your click to... There's an image with another id, did you mean to use
.delegate("#sliderimg", "click", function(){
}
Also as others have pointed out it's best to use jquery.on(), or in your case you can even just use $('#sliderimg').click() unless you plan to add / remove the element with that id to the page.
you can try this with no need for anything to be true or false
$('#sliderimg').on('click',function(){
$('#tabs-minigames').slideToggle(); // you can use fadeToggle() as well
});
Declare the variable in the $(document).ready function
$(document).ready(function () {
var status = false;
$("#sliderimg").on("click", function () {
if (status === false) {
$("#tabs-minigames").show();
status = true;
} else {
$("#tabs-minigames").hide();
status = false;
}
});
});
I found 2 awesome jquery plugins in "Magnific Popup" and a special stapel-function "Adaptive Thumbnail Pile Effect with Automatic Grouping" and I thought with both together, I could make a pretty cool (responsive) portfolio with resizing lightbox.
But unfortunately they don't work together as I expected as you can see here.
When you click on the top picture and open one of the 2 that appear,
it will show up in a lightbox, but without the close-Button and title below the image.
So you have to go back with the "browser-back-button" (not good).
When you click on one of the small pics on the bottom "without stapel function" the picture opens with the close-button and Title from "magnific popup". So here magnific pop up works fine.
Now, I didn't find out why the magnific-popup close-button/title doesn't appear with the stapel function pics on the top.
As I'm not a JS pro, I can only guess that there might be a conflict between the two js-scripts, so I tried to add "jQuery.noConflict();" but it was just a guess and it didn't solve the problem.
I hope, someone has an idea.
This is the JS stuff in the HTML header:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Modernizr -->
<script src="js/modernizr.custom.63321.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- external Stapel JS file -->
<script type="text/javascript" src="js/jquery.stapel.js"></script>
<!-- internal Stapel JS -->
<script type="text/javascript">
jQuery.noConflict();
$(function() {
var $grid = $( '#tp-grid' ),
$name = $( '#name' ),
$close = $( '#close' ),
$loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
stapel = $grid.stapel( {
onLoad : function() {
$loader.remove();
},
onBeforeOpen : function( pileName ) {
$name.html( pileName );
},
onAfterOpen : function( pileName ) {
$close.show();
}
} );
$close.on( 'click', function() {
$close.hide();
$name.empty();
stapel.closePile();
} );
} );
</script>
This is JS for magnific-popup before closing body-Tag:
<script type="text/javascript">
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
The magnific-popup is called by the class="popup" in the links (works fine here):
<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75">
</a>
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" title="Der Titel"> <img src="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" height="75" width="75"></a>
..and with those pictures it doesn't work:
<ul id="tp-grid" class="tp-grid">
<li data-pile="Logo">
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/visitenkartendesign-erbengemeinschaft.jpg">
<span class="tp-info"><span>Logo 1</span></span>
<img src="http://www.marvin-online.de/test/images/print/thumbs/visitenkartendesign-erbengemeinschaft.jpg" />
</a>
</li>
<li data-pile="Logo">
<a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg">
<span class="tp-info"><span>Logo 2</span></span>
<img src="http://www.marvin-online.de/test/images/print/thumbs/logo-safework-1.jpg" />
</a>
</li>
</ul>
Ok, I've found a solution: just add the magnific plugin’s code inside Stapel’s “onAfterOpen” callback function. (Many thx to Andrew-David!)
I have searched high and low for an answer and have found similar examples of the problem but the answers do not apply to my scenario. The reality is I am new to this and therefore I don't have the skills to adapt the answers I have found to my problem.
The problem:
I have a Div in which when a thumbnail is clicked the Div image replaces with another image via a JavaScript/jQuery script (I am not sure exactly maybe someone could clarify). This works fine however the problem is the page scrolls back to the top and the user then has to scroll back down to see the image after it has replaced itself.
I have looked online and have found that a return false: in the JavaScript may help however I have looked and return false is already present.
The other option I have looked at using is a JavaScript cookie based solution in which a cookie is sent, and the browser scroll position is maintain by reading the cookie however I cant seem to get that solution to work, I think the issue may be caused because I am hosting locally but I may be wrong...
The third is using a PHP script but I have not found a definitive answer on this method and it also means I am going to have to learn about PHP (something I'm sure I will have to learn in time anyway).
Here is the JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.galleryicon').live("click", function() {
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
Here is the html:
<div class="cakecont">
<div id="cakebox">
<img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>
<div class="pageinfo2">
<h3>Cake Type 1</h3>
<h6>£2.00</h6>
</div>
<div class="infobox">
<h6> Description </h6>
</div>
<div class="gallerybox">
<a href="../images/cakes/babycaketop.png" class="galleryicon">
<img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>
<a href="../images/cakes/babycake1.png" class="galleryicon">
<img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
</div>
</div>
</div>
And here is a link to the working demo http://micahcarrick.com/code/jquery-image-swap/index.html
I have tried to resolve this on my own. This is the first question I have had to ask so far regarding the building of my website, all my learning and remedies to past problems have been served by Google, this one has eluded my search engine skills.
Below I have added all the html for the page in case there may be other script overriding the "new" modified JavaScript -
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cupcakes & Cakes for Birthday/Wedding Gift in Bournemouth Dorset - SweetVision</title>
<meta name="keywords" content="cupcakes, cake, gift, wedding, birthday, Bournemouth, Dorset" />
<meta name="description" content="For the finest Cupcakes and Cakes in Bournemouth Dorset look no further, Sweetvision specialise in baked goods for Weddings, Birthdays, Baby Showers, Easter, Halloween, Christmas" />
<meta name="robots" content="ALL" />
<meta http-equiv= "Content-Language" content="en" />
<meta name="Publisher" content="Sweet Vision" />
<meta name="Copyright" content="Copyright 2012, Sweet Vision, All rights reserved." />
<meta name="Author" content="Mark Webb for Sweet Vision - www.sweetvision.co.uk" />
<link href="../images/homepage/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon" />
<link href="../root/css/sweetvision.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.galleryicon').live("click", function(e) { // the (e) represent the event
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
e.preventDefault(); //Prevent default click action which is causing the
return false; //page to scroll back to the top
});
});
</script>
<script src="../js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script src="../js/SpryMenuBar.js" type="text/javascript"></script>
<link href="../root/css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="sprybox">
<ul id="check_menu" class="MenuBarHorizontal">
<li>Home</li>
<li>About Us
<ul>
<li>Contact</li>
<li>News</li>
<li>Events</li>
</ul>
</li>
<li>Our Menu</li>
<li>Gallery</li>
</ul>
<div class="mainmenu">
<a href="../root/mainmenu.html">
<img src="../images/buttons/mainmenu.png" />
</a>
</div>
<div class="backbutton">
<a href="javascript:history.go(-1)">
<img src="../images/buttons/Backbutton.png" /></a>
</div>
</div> <!-- end.header --><!--end of sprybox -->
<!--end div element -->
<!-- thumbnails are links to the full size image -->
<div class="cakecont">
<div id="cakebox">
<img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>
<div class="pageinfo2">
<h3>Cake Type 1</h3>
<h6>£2.00</h6>
</div>
<div class="infobox">
<h6> Description </h6>
</div>
<div class="gallerybox">
<a href="../images/cakes/babycaketop.png" class="galleryicon">
<img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>
<a href="../images/cakes/babycake1.png" class="galleryicon">
<img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2012 by Mark Webb. All rights reserved.</p>
</div> <!-- end .footer -->
</div> <!-- end .container -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("check_menu",{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29457683-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
You can save the current scroll amount and then set it later:
var tempScrollTop = $(window).scrollTop();
..//Your code
$(window).scrollTop(tempScrollTop);
For all who came here from google and are using an anchor element for firing the event, please make sure to void the click likewise:
<a
href='javascript:void(0)'
onclick='javascript:whatever causing the page to scroll to the top'
></a>
Try the code below to prevent the default behaviour scrolling back to the top of the page
$(document).ready(function() {
$('.galleryicon').live("click", function(e) { // the (e) represent the event
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
e.preventDefault(); //Prevent default click action which is causing the
return false; //page to scroll back to the top
});
});
For more information on event.preventDefault() have a look here at the official documentation.
What you want to do is prevent the default action of the click event. To do this, you will need to modify your script like this:
$(document).ready(function() {
$('.galleryicon').live("click", function(e) {
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
e.preventDefault();
});
});
So, you're adding an "e" that represents the event in the line $('.galleryicon').live("click", function(e) { and you're adding the line e.preventDefault();
I had a similar problem getting scrollTop to work after reload of div content. The content scrolled to top each time the procedure below was run. I found that a little delay before setting the new scrolltop solved the issue.
This is cut from wdCalendar where I modified this procedure:
function BuildDaysAndWeekView(startday, l, events, config)
....
var scrollpos = $("#dvtec").scrollTop();
gridcontainer.html(html.join(""));
setTimeout(function() {
$("#dvtec").scrollTop(scrollpos);
}, 25);
....
Without the delay, it simply did not work.
Something to note, when setting the scroll position, make sure you do it in the correct scope. For example, if you're using the scroll position in multiple functions, you would want to set it outside of these functions.
$(document).ready(function() {
var tempScrollTop = $(window).scrollTop();
function example() {
console.log(tempScrollTop);
};
});
$('html,body').animate({
scrollTop: $('#answer-<%= #answer.id %>').offset().top - 50
}, 700);