How can i restrict some section and js to load in mobile version in bootstrap 3.
For client Engagement i am using chat and click to call features on a website.
I want to restrict these features loading in mobile version.
Twitter's Bootstrap can't be used to restrict the load of content or javascript code. Bootstrap load all and only will hide or resize some elements based on screen width (css media queries).
To hide html, see: http://getbootstrap.com/css/#responsive-utilities
You could use enquire.js to prevent js code to load based on media queries, see for an example: http://wicky.nillia.ms/enquire.js/examples/defer-setup/
Related
I am working on a project using Gatsby, Strapi and Cloudinary. I am deploying the frontend on Netlify and the Strapi app on Heroku (with the addition of a Postgresql database instance).
I have been searching for weeks now and but I cannot seem to find a way to lazy-load images sourced through Cloudinary.
I have replaced the default rich content editor on Strapi with the ckeditor so editors can add photos to their content. These are automatically uploaded and served by Cloudinary.
My question is, is there a way to lazy-load the images, and if so, should this be done when serving them from Cloudinary, should I do this as a Strapi middleware or simply through Gatsby?
Note: I am not sourcing the images anywhere on the front-end since it's parsed as html from Strapi. All I'm currently doing in passing the fetched content to a div using
dangerouslySetInnerHtml.
With dangerouslySetInnerHtml directive you are inserting whatever is inside your rich text as HTML content so you lose control of customizing the behavior of that content. Hence, it will be rendered all at once.
There's no built-in way of doing this except by parsing your rich text with a third-party dependency (which I haven't been able to find)/custom method that will give you the capability of wrapping your images with any custom component. The idea, either way, is to parse your rich text blocks to customize the output.
In addition, check if the images tag (<img>) comes with the loading=lazy property attached:
<img src="image.jpg" alt="..." loading="lazy">
The application has to show invoice PDF inside <div> which is currently rendered in Webapp itself.
For example :
The web app already has the PDF generation functionality which generates by clicking on generate_pdf function.
I want to show the same PDF by using the same function which is currently available for the public.
Example URL:
http://URL/index.php/pulic/view/generate_invoice_pdf/Smgr4NX7yiWfu3J6qhdtRzF9lVT0kLs2
I have tried InAppBrowser however, it opens up outside the app just want to show inside the app.
DocumentViewer is not supported since it does not contain .pdf in URL
Anyone who needs the solution
I use fileTranfer to download the file and File to show it on the device.
I have this device data that are shown in real time using ThingsBoard.
And I have an iframe to show the device data content on a web page.
If I used the same iframe on my ionic app's HTML page, I am getting all the header, submenu and other unnecessary things that are not needed in the app.
What I need is the main content area of the device data section.
Can I do that with the iframe or do I need to call all the individual ThingsBoard API's to populate the dashboard on my own?
If you are managing the Thingsboard then you can develop custom iframes with unnecessary headers/footers removed. Then you will get clean iframes to display inside your Ionic app.
In case the Thingsboard is not managed by you then you have to develop adapters to scrape the html data from the Webpage. These adapters will provide your Ionic app only the data you require.
You can use PHP Simple HTML DOM Parser for implementing these data scraping adapters.
PHP Simple HTML DOM Parser
I recently uploaded custom html and css for one page on my big commerce store.The page is responsive, and mobile optimized. It works on desktops, but is over ridden by the generic mobile theme that is installed when I view it on my phone. How can I stop this page from being over ridden by the mobile version, without disabling the mobile theme completely?
Thanks,
There are 2 methods off the top of my head.
First method
Any HTML file on BigCommerce, with a mobile/responsive theme, has 2 copies of some part of the HTML page. The mobile HTML/CSS is simply triggered by an HTML class mobile on the HTML copy that is there to be only seen on mobile, which contains one copy of relevant HTML (ie, menus, logo, shopping cart icon and link, etc).
Another HTML block has class desktop and is only triggered for certain screen sizes (similar to mobile), and only shows it's desktop version of the HTMl when the screen size conditions are met.
So if screen is small, in your responsive.css file, .mobile is display:none;, while desktop class has all the proper visible CSS.
On the reverse, on desktop-sized screens, the desktop HTML is properly styled, while the mobile class HTML block is display:none.
So, in this first solution, you would simply place a copy of your custom HTMl and style it properly for display on mobile screens. This way, the mobile-styled version will only show up on mobile devices, while the desktop properly-styled version will only show up on dektop size screens. As far as BC goes, I think this is the optimal method.
Second method
You can make a custom template for the page in question. So if it's product.html and you want it custom for some specific product(s), you would create a product-custom.html and place it in your WebDav "/template/Panels" folder.
Now, on your product(s) which must use the new custom HTML, go to their page and scroll to the bottom and you will see a template file selection box, which should say product.html. Change that to your new product-custom.html.
Now, as for the custom file, simply edit the HTML/CSS rules revolving around .desktop and .mobile class (possibly just removing them all together) so that when a page is loaded on a small screen, the CSS rule to hide the desktop version won't apply. At the same time, you should delete the duplicate .mobile class HTML as it will no longer be needed.
This second method is much more flexible but also takes more work and is generally much more messy and requires much more maintenance.
I strongly recommend method #1.
Let me know if this helps and if you have nay other questions.
websphere portal 8 comes with default dojo 1.7.2, and this dojo documentation for lazytreegrid if for dojo 1.7 http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html
But when I run the example in the documentation, the treegrid is displayed like in image1. But when I use the same example, the treegrid is displayed in portal 8 differently(image2), which is quite ugly, how to get the same look and feel as in documentation
The example on the Dojo site is using "Claro" and your Portal site is using a different theme (I'm not sure which one, I think Soria).
The different themes can be loaded as modules in the Portal theme (not to be confused with the Dojo/Dijit theme).
Here's the wiki page:
http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=IBM+WebSphere+Portal+8+Product+Documentation#action=openDocument&res_title=Dojo_and_WebSphere_Portal_wp8&content=pdcontent
Look at this paragraph:
The tundra class is set on the body element in the portal Web 2.0 themes, and its corresponding CSS files are linked in as well. To use a different theme within a particular portlet, do not change the CSS classes of the body element from within the portlet because it has consequences on all other portlets and theme components that use Dijits on the page. Instead, use a separate node within the portlet to contain all the widgets used by that portlet, and assign the different theme class name on the container node inside the portlet.