I am creating a dashboard with the AdminLTE template, and I have a list section in which I can change the colors of the different sections of my web page.
What I would like to know is if there is a way to generate a preview of my web so that the administrator user of the dashboard can see the changes there.
I think it should not be easy, but I would like to know if there are different ways to achieve that, or if there is a plugin that is helpful.
Currently my project is done in HTML, Javascript and PHP
You can use an iframe to show the preview of your website in the admin dashboard.
Just add an iframe tag inside the dashboard panel like this,
<iframe src="https://www.your_website.com"></iframe>
Tip: To deal with browsers that do not support , add a text between the opening tag and the closing tag.
Tip: Use CSS to style the (even to include scrollbars).
Related
Square up provides a couple different ways to add appointment booking to an external website. I am working with a Wordpress site with Elementor using the Astra theme, and I've attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can't edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn't show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe
height="1800px" src="linkhere">
</iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. :-(
Please help me!
When you send a website link in chat apps like WhatsApp or Skype, a small website preview will appear. I want to implement similar feature in my web application developed using HTML 5 and JavaScript. So if I have link, i want to show rich review for it on a div tag.
What needs to be done to achieve desired results.
These previews in Skype and similar programs are generated based on the meta tags.
Different applications/social networks use different meta tags for this. Skype, for example, understands the open graph meta tags: http://ogp.me/
There are many articles describing the process of writing meta tags. You can take a look at this two:
https://warfareplugins.com/open-graph-tags-twitter-cards-rich-pins/
https://moz.com/blog/meta-data-templates-123
What you would need is a renderer, that takes the link, parses the page, tries to understand the meta tags and renders the preview based on the meta tags.
Some of the open source implementations for open graph are listed here: http://ogp.me/#implementations
Hi and thanks in advance for any help.
I'm working on a multilanguage joomla! website that runs some roksprocket mosaic modules positioned right after single article content.
When I navigate the site by using the default language everything works great, but when I switch to a non-default language I experience URL problems with content loaded inside the roksprocket module by the "load more" button or by the filtering tags.
The first block of visible items, loaded with the page, link to the correct articles. But when I filter the items or click the load more button, the new loaded articles links are not working. Default language tags are automatically added to the url of the links. So I get:
www.mysiteurl.com/default_language_tag/alias_of_the_current_page_tag/category_tag/article_tag
This happens both with and without SEF URLS activated.
I would try to avoid these added tags by cutting them out from the html with javascript, but I don't know what is triggered after the loading of the new content.
Any suggestion?
Thanks a lot for your answers.
I am creating a web site and I was given a website template that has various html pages and javascript that my website will reference. I wanted to know if this is possible to add those files and reference them in my project or if I am going about this the wrong way.
First time building a website but I have experience building applications, just confused on the right way to go about this.
Add a master page to your website and replace it's html by the html of your template. add a content place holder in it so that controls can be placed in content pages. copy image, css , and jquery(if any) folders in website. if your css and images are not shown in design of master page then replace Image to ../Image in its html and source of css ../(your file name)
I'm looking for a good way for webmasters to embed content from my website providing them with a simple javascript snippet.
Two things:
if I attached a stylesheet, won't it break theirs?
inline or attached CSS, their is still a risk that their style breaks mine?
what is the technique used by FB or Youtube to allow embed content, without using iframes?
Thx,
FB uses iframes.
You can make a content.html file you or other pages can load via ajax. Where content.html does not contain the whole page but just a content part. Like:
<h1>This is important</h1>
<p>here is some text.</p>
For example with jQuery you can place place a html file in a div like this: $('#result').load('content.html');
But I think it depends on what you want to share and to who. Maybe a REST API would work better in you case?
It's just an impression, but actually Facebook and other social networks do use Iframes. But they're created by their JS that you also have to embed, making the their tech choices more powerful. Later on they might update the JS and then get rid of the iframe in favour of something else.
However, currently, you embed a div with a given CSS class an a data-href, plus the JS. The script will find those divs .fb-post and fill it in with an iframe containing the post indicated by the data attribute.
If you want to make something simpler you might as well give your users an iframe with a responsive page inside it.