I had a really simple question.
I'm trying to implement Flexslider (http://www.woothemes.com/flexslider/) onto my page http://www.gofree.com/123-LAC/ but it does not seem to work (the images appear really large and are listed).
I followed all of the directions on the page. What am I doing wrong?
Thanks in advance!
Use jquery library above the flexslider.
<link rel="stylesheet" href="styles/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="styles/jquery.flexslider-min.js"></script>
And dont use another jquery library in that page. It create the conflict of both jquery library.
Always Use jquery latest.. It improve the efficiency and performance
of the site
Learn jquery
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
I'm using bootstrap-table-export to be able to export data from a table, but the icon is weird:
Does anyone knows how to change this icon? I read the docs, but I didn't understand it.
The icon is a glyphicon. If you got this symbol instead of the normal glyphicon-export, you should check if you are including the bootstrap correctly. The recommended CDN for Bootstrap is:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Hope it helps.
I have a problem with bootstrap and bootstrap awesome font.<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
when I put these together something is not working. If I remove for example bootstrap, font awesome is working. I am trying to add social media buttons like this: social media buttons
and it is working but without bootstrap. But when I add bootstrap I am loosing navigation bar: broken buttons when add bootstrap. Sorry for my bad explanation I am new in this :) any help would be appreciated.
Have you tried to implement bootstrap first and then the bootstrap awesome one?
If css classes have the same name they override each other based on wich one is defined last.
For example, when i add bootstrap.css first with a class .emoticon and after that a custom.css file that also has a .emoticon class it will use the implementation from the last one.
Hope this helps!
I would suggest to download bootstrap and implement locally. This will solve the issue, if I am not mistaken the problem cause integrity, crossorigin attributes.
Copy the code of font-awesome and bootstrap in new css file rather than cdn. Include bootstrap.css and then font-awesome.css in your Index.html, it would work.
We have some performance issues with IE10/11. The following plunker explains some of our degrading performance while repeating table rows with custom elements.
Plunker Example
code
In this plunker example, we get a total of 68 ms in chrome to render the entire table.
In IE11 we get 280ms and see a 100% increase in render speed per row. While chrome do up to 3 rows per ms, IE does one every 2ms.
This plunkr is a basic model of our application. In our application we repeat the following template which is alot heavier. It involves style calculation and show/hide bindings depending on the users settings and permission level.
It's in swedish so don't mind the text.
The second row (expanded information) is if.bound so it's not drawn initially.
In our application, if we render a view with 100 rows of our template, chrome renders the entire table in 587 ms. IE11 does it in 3779ms. Edge does it in 1283ms, and Firefox 909ms.
Each row takes about 30ms in IE11,
Is there any reason IE11 should perform so much worse with the aurelia-template? What can we do to improve IE render speed? I have tried setting bindings to oneTime but that didn't do much. Is there something you should avoid doing in custom elements that doesn't work well with repeating and IE.
We want the custom elements because of reusability and code management since the template is pretty big.
Make sure you're using an up to date version of Aurelia, and make sure that you're using Bluebird if you need to support IE or older versions of Edge, as their Promise implementations are atrociously bad.
If you replace the index.html in your Plunkr with this:
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="//cdn.jsdelivr.net/bluebird/3.4.5/bluebird.min.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Then the last row's draw time on my desktop is 278 ms in IE 11 on Window 10. See here: plunkr
I have posted an issue with the aurelia team
https://github.com/aurelia/polyfills/issues/39 and a github project https://github.com/4nderss/aurelia-performance-test reproducing my issues.
Aurelia team closed the issue so there might not be any fix for IE11 for now.
Edit: The aurelia team found an issue and it is now fixed
Hy guys!
On my site I noticed that on some pages I don't have a Jquery library included. But on other pages I see it in my head tag:
<head>
...
<script type="text/javascript" src="/assets/fe9bd624/jquery.js"></script>
<script type="text/javascript" src="/assets/fe9bd624/jquery.ba-bbq.js"></script>
...
</head>
In my theme layout/main.php I don't have Jquery files in head tag. So question is: what controls inserting Jquery on my pages, and how to insert it on all pages. Thx.
jQuery would only be inserted automatically if you call the registerCoreScript method. There's nothing built into Yii to force jQuery upon you.
However, it could be that your using a widget or extension somewhere that uses jQuery, which would make it's own call to the registerCoreScript. (CGridView for example)
If you use any widget or component or extension which needs jquery & using function registerCoreScript than jquery will be loaded automatically otherwise YII does not load any JQuery.
In every view that requires jquery you can put this on top:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
You can put it into your layout also if you want to include in all pages in a particular layout.