I've been using the HTML5 UP Photon template https://html5up.net/photon
I'm trying to retrofit one of the buttons towards the bottom called "Learn More" to open up a modal window with a few paragraphs of text. I've tried to give the button a btnID and link a js function to open it but I can't get it to work. Any help would be appreciated. Here's the html. The preset class references Bootstrap I think.
<li>Learn More</li>
As far as I can tell, the template you are using does not provide any modal window component out of the box, so you'd have to find one and plug it in there or write one yourself. Assuming you go for something ready made, you need to do the following:
Search for jquery modal window and find one you like.
Download it's js and css files and them into your page (or use a CDN)
Write some simple jquery to call that modal. It could be as simple as writing $('a:contains("Learn More")').modal(). This depends on the modal componet you choose
Let me know in the comments if you want more help
Related
I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
I have a Tapestry 5 (5.3.4) app that shows a grid with some values. I want to add a field in grid that will show a image icon (i have done this) and when user clicks on the icon, lightbox will show the requested image (I need help with this part). The problem is the lightbox because the JavaScript is not called and the image is shown in single page (URL to image - resource on server). I have tried to open lightbox outside of a grid and it worked, but won't inside. Any thoughts?
Sorry for posting this question, but the answer was simple collision between jQuery and Prototype. Just needed to add $.noConflict(). to jQuery library. So lightbox was possible after all.
My Qt project needs a chat window similar to Skype. Namely, the chat history window, not where the user inputs his text. I thought of using some kind of HTML view to programmatically add chat text as it comes in from the chat parties.
Some requirements:
It has to be formatted nicely, support for CSS I can apply to it..
I must have scroll control - e.g. autoscroll to the end of the chat when new chat lines come in, even if I'm currently scrolled up for some reason.
it has to allow a full mouse copy, just like skype.
Will QWebView do the hob? I did not see scroll control API, or being able to "append" new text lines. Will I have to re-create and re-submit the HTML using "setHTML" every time a new line comes through?
Any advice will be appreciated.
You may want to consider using either QTextEdit or QTextBrowser. Both of these widgets have support for HTML (though it may be somewhat limited). These widgets will allow you to append HTML line-by-line. They also inherit from QAbstractScrollArea, which provides you with access to their scroll bars. I'm not sure if they will support CSS, but they do support Qt's style sheets, which might work for you as an alternative if you can't get CSS to work. They also provide out-of-the-box copy, cut, paste, undo and redo (though you'll probably want to customize this for your case).
I am making an ASP.NET website where i have sort of a static image gallery. Now when i click on an image in this gallery i want to show a pop up containing text (10-15 lines) describing the image.
How can I achieve this? I don't have much idea as to how I should proceed.
There are two steps to archive this.
First step is to make the pop up window using css.
Many examples on google about that.
Search on google
Open Css popup
Easy Css pop up
The Second step is to make your javascript to open it and show your actually text. If you use a library like jQuery you can make many thinks more easy, but if you wish pure javascript can you also make it work.
For example on the last link 'Easy Css pop up', the javascript to open it is:
<a href="javascript:void(0);" onMouseover="ShowPop('pop');"
onMouseout="HidePop('pop');"><img src="myimage.jpg" alt=""></a>
So what you do is to render your text of your images into the div that have this css popup and then you place a code like that on every image to open the correct popup.
Of cource you can find a ready to use gallery like the http://highslide.com/
You can use jQueryUI Dialog or simply open page with javascript
I have a large table that I want to appear in a dialog created by jQuery UI.
The development version I created worked correctly but note that this was not using the default Wordpress versions of jQuery and jQuery UI. I registered versions of both libraries for the purposes of the development version.
Using the same script and dialog contents I attempted to reproduce the dialog for my blog using the default versions of the jQuery libraries.
This produces a result where the dialog opens but in the display the default close button found in the title bar is on the left. When you mouse over this close button the icon moves down, but it still closes on a click.
In addition the resize icon appears in the bottom left as does an additional close button I added.
This led me to suspect that I have a css conflict between my table and the jquery UI css. I've noted posts suggesting that there is a problem with jQuery UI 1.8.16 and dialogs with a large amount of content.
However, I can't locate the css for the default jQuery UI library, I'm assuming that it must exist.
The easy answer to this problem would be to deregister the default versions and register external versions but that seems like a waste when the functionality is already in Wordpress.
Questions:
Where do I find the css in Wordpress for the default jquery UI
Any suggestions as to what may be the cause of this problem
Thanks
1) The CSS files are located at /wp-includes/css/jquery-ui-dialog.css (compressed) & /wp-includes/css/jquery-ui-dialog.css (development).
2) We'd need to see an example to have an idea of what the problem might be.
All the styling for that button is located on line 69 in:
/wp-content/plugins/mailchimp//css/flick/flick.css
I resolved the display issue by simply adding the CSS files from the jquery UI theme. Once that was in place everything displayed correct. Not elegant but it solved the problem quickly.