When I use Scrollspy it seems to show the scrollbar on the whole webpage. I looked at the source code and it seems to be hardcoded to the body element of the page, so I am guessing this means that it is impossible to put two scrollspys on a webpage?
Have you tried it? I am pretty sure this is supported, let me quote the source:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
Related
Im a little lost on this, Im trying to get started with Vue but I cannot seem to get the delimiters changed and working. Would someone be nice enough to take a look at this code and tell me if it looks like it should be working? Im using this with Django and need to change them. In addition, even experimenting with the basic tags but loading the HTML page manually in my browser doesn't seem to be working. Any ideas? I can confirm Vue is loading because I get the message in the console when it loads. I am loading this from the CDN.
const app = Vue.createApp({
el: '#table-div',
compilerOptions: {
delimiters: ["[[',']]"],
},
data(){
return {
objects: {},
text: 'This is a test',
}
}
});
OK, so in case someone else runs into issues. My particular issue is that the scripts needed to be loaded outside the ending body tag in my base.html file. I was using a template with Django and I could not get it to work within the template fragment. Loading it in the main file after the </body> tag worked like it should. I'd also add that the new compilerOptions way of changing the delimiter works as intended as well in case anyone stumbles on this trying to change the delimiter for any version 3.1+.
I'm essentially using the default web/viewer.html and its associated files that comes with it. I have it loaded in an iframe. How can I add an event listener to when the pdf is scrolled? Thanks for any help.
I dug around and tested some things more and figured it out, which is pretty simple but if you're in the same bind:
var viewerContainer = window.document.getELementById('somePdfIframe').contentDocument.getElementById('viewerContainer') will contain the element whose scrollTop will change.
So if
viewerContainer.scrollTop + $(viewerContainer).height() == viewerContainer.scrollHeight
then the user has reached the bottom of the pdf iFrame.
You can also viewerContainer.addEventListener('scroll', function() {...}) to listen for scrolls in the pdf iframe.
One little thing that was tricky for me is that you should make sure the pdf iframe was fully loaded before calling this code.
I'm practically brand new to Aurelia, but over the course of a few days I've picked up the starter template and gone through some video training in Pluralsight. I have a unique vision that I can't seem to decide whether compose element, custom element, or router is best to use for this scenario - or if I need to write something completely custom.
I prefer to continue using the router because it gives you the
URLs and history state. Linking deep within the web app may be necessary.
When a view / viewmodel is initialized, I want the view appended to the DOM, NOT replaced. The <router-view> element works by replacing the view.
With each view appended to the DOM, I would like to create a set of tabs representing every view that has been opened so far. Think of any modern text editor, IDE, or even a web browser shows tabs.
Sometimes it would be necessary to detect whether a view is already rendered in the DOM (viewmodel + parameter) and just bring that view to the front -vs- appending the new one.
Do you have any suggestions, examples, etc for someone relatively new to Aurelia, SPAs, and MVVM?
Thank you.
I believe the easiest way is using the compose element. You would need an array containing all screens, and another array to hold the opened screens. Something like this:
screens = [
{ id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' },
{ id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' }
];
_activeScreens = [];
get activeScreens() {
return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1);
}
In the HTML you just have to use <compose></compose> for each iteration of activeScreens.
I made this example https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b to show you the idea. In my case, I've used an html table. In your case, you could use a tab plugin, like Bootstrap or jQuery.
Hope this helps!
I want to get the actual content of a page I loaded into a webview after some content has been updated by some jquery
$(document).ready(function() {
$("#main").append('<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>');
});
After the page has been updated I tried to get the content of page with the following command [vala syntax]
web_view.get_main_frame ().get_data_source().get_data().str
but I only get the original content (even if loading is finished)
using
web_view.get_dom_document().document_element.text_content
I get the actual content but the tags are removed.
I guess I could walk the whole tree to get the actual document but tere should be a more easy way to do it.
EDIT:
my solution
this.web_view.load_finished.connect ((source, frame) => {
stderr.printf(this.web_view.get_dom_document().body.get_inner_html());
}
I'll probably find this awfull when I'll read this some years from now but for now I'll go with that.
In the HTML DOM, elements implement the HTMLElement interface. The HTMLElement interface in WebKit includes the outerHTML property. This property returns a string containing the serialized markup of the element and all of its children. I'm not familiar with Vala but based on your code snippets this would be accessed like so:
web_view.get_dom_document().document_element.outer_html
The correct answer in Vala is this:
webview.get_dom_document().get_body().get_inner_html ()
I have seen numerous advice on stackexchange and all over the web suggesting that I not use jquery's live function. And at this point, it is deprecated, so I'd like to get rid of it. Also I am trying to keep my javascript in one place(unobtrusive)--so I'm not putting it at the bottom of the page. I am unclear though on how to rewrite the code to avoid live for elements that don't yet exist on the page.
Within the javascript file for my site I have something like this:
$(function() {
$('button.test').live('click', function(){
alert('test');
});
});
.on( doesn't work since the element doesn't exist yet.
The button is in a page I load in a colorbox pop-up modal window. I'm not sure exactly where that colorbox window sits in the DOM but I think it is near the top.
I could use delegate and attach this to the document--but isn't the whole point of not using live to avoid this?
What is the best way to get rid of live in this case?
You can use .on() - http://api.jquery.com/on/
$(document).on("click", "button.test", function() {
alert('test');
});
If you use live() you can use die().
You can also use on() and off().
They do about the same thing but its recomended to use on.
I ended up avoiding both live and an on attached at the document level. Here's how:
Wrap all of the jquery code specific to objects in a page which loads in the colorbox window in the function like so:
function cboxready(){
...
}
The code wrapped in this function can attach directly to the objects (instead of attaching at the document level) since it will only get run once the colorbox window is open.
Then just call this function using colorbox's callback when you attach the colorbox, like so:
$('a.cbox').colorbox({
onComplete:function(){ cboxready(); }
});