CSS Image Slider - javascript

Here is a link for the type of image slider I want. It is by W3schools but, they are using a big css file for that...i only want the relevant parts of it...I mean a css only for the image slider...do you guys know any link or something, not necessarily W3...but any site, from where i can have that ?
Link: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

The only part w3 schools uses CSS for is positioning the left and right buttons, try removing
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> and run it again.

you are using wrong link. this slideshow use w3 framework. go to w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow this is manual js slideshow by w3 tutorials

Hello check out this and tell me if that sounds like what you wanted.
Online demo of the code.

Related

How to Merge seperated JS file, CSS file and HTML file together?

I'm new to JavaScript. I need a CSS text animation to setup a part of my website. Here I found an attractive animation link is in the 3rd comment because stackoverflow doesn't allow me to put the link here (keep showing an error)
When I copy these HTML code, CSS code and JS code and create a webpage including them, It doesn't work properly. Actually no any animation.
How can I solve this to work?
For javascript
Make script tag and copy all the JavaScript between it.
<script>...</script>
For css
Make a style tag and copy all the CSS between it.
<style>...</style>
And to fix your problems double check your code and see whether you are missing some library or not.
The codepen project us using jquery, font-awesome and other things. This will help you import some of them.
<script src="https://use.fontawesome.com/230e98b440.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
This is an Option :
Signup in the codepen.io
Goto your link
Click on the Export button at the right bottom corner
Select Export.zip
After download the zip file, unzip it
Open index.html and you'll see the result.
Check the code of index.html for the missing codes

Change Linkedin Company Profile plugin Width

I have been trying to figure out how to change the size of the Linkedin Company Profile width which we can create here. They will give you two script tag which will create the widget for you in your site. Nothing else. So you have no control over your css.
I had been struggling for days and finally figured it out. I tried to add inline styling on the site even with the !important tag but it still took the styles from the linkedin.css. I tried styling it every possible way but didn't work.
Since SO allows to share knowledge as Q&A format I thought of sharing this. Please see the answer below.
Here's an example of how to provide the width to a plugin:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/xxx" data-format="inline" data-width="400"></script>
You can add a data-width="400" attribute to the script tag. That's all.

tumblr javascript embed with css skin

I am trying to add a single most recent tumblr post to another page.
I found the easiest way is to use the Javascript code provided by tumblr
here is what they offered:
<script type="text/javascript" src="http://occupy837.tumblr.com/js"></script>
adding ?num specifies the number of posts, so I can see that I am almost there
<script type="text/javascript" src="http://occupy837.tumblr.com/js?num=1"></script>
when I go to the page
(www.Occupy837.com) One single post shows up!
my only issue now is that it has a single 1 on the left of the post
tumblr quotes "[use the] code to embed your posts as basic HTML that you can skin with CSS:"
Does anyone have any idea how I can remove that number?! what do I have to do with CSS to make that disappear!
Add this to your css
li.tumbler-post {
list-style: none;
}
Here is the answer!
after doing some research I found this to be the solution:
ol.tumblr_posts{
list-style:none;
}
be careful not to type "tumbler" because it is always without the "e"
My friend ran into this last night and tumblr exactly provides something that is pretty decent but with very few documentation. Every tumblr post has CSS classes. The above answers work. If you need to know more about the classes tumblr provides right click a post and click inspect element.
You can add these classes to the CSS of your website. Adjusting the CSS of tumblr doesn't effect it.
Adding the above CSS will fix this issue.

How to change a url for the first element only?

I want to be able to change a url directory for, e.g. the first <img> in a <div>, or, any image that is not the first.
My reason is that the loading speed is too slow. That's because I used CSS to generate thumbnails from larger images. I now want to redirect those thumbnail images to a thumbnail folder with small images, rather than having to redirect them individually, which would be a pain.
<img src="images/stories/Images_for_Web/baths_windowToTheSoul_WB4_p90.jpg">
<img src="images/stories/Thumbs/baths_windowToTheSoul_WB4_p90.jpg">
here is the link to the site I'm working on: http://www.d1187169-1.cp.blacknight.com/whitebook1/
I have the CSS automatically resizing and cropping the images for any that is not the first. I like that solution as it will save work in the future so if this part could work also, it would be brilliant, unfortunately I just know CSS, HTML, a little Joomla and only starting in javascript etc., but I am willing to try anything to get this to work!
Any thoughts or suggestions much appreciated. Thanks, Paul
If you were to use jQuery, you could do the following:
$("#somediv img:first").attr("src", "images/new/location");
As you can see just one line of code thanks to the CSS-like selectors. I highly recommend using jQuery for such tasks.
Thumbnails should be generated with php/on the server side. Resizing with CSS is not really resizing - still the full image is loaded.
Maybe you should look in jQuery - it has selectors that are like CSS selectors.

Can you make a Conditional Statement to use, or not use, some JavaScript depending on Viewport Size?

I wonder if anyone can work this HTML, CSS, Javascript puzzle out?
I'm using an #media viewport CSS declaration to detect mobile screen sizes, which minifies my website for mobile visitors, purely using CSS which is nice as I only have 1 website to update, not 2. So far so good... :)
However, in my HTML there's a line of code referencing a Javascrit file that makes this really nice 'soft scrolling' effect on the main navigational ul li a links (eg ).
This all works fine on the normal version of the site, but for some unknown reason it stops the navigation working altogether on the minified version of the site. If I delete this link to the js/softscroll.js file, then the links on the minified site work fine & I'm OK about loosing this effect on the mini version, but then... the main sites navigation stops! :< I have to have this effect for the main site btw.
So, my question is...
...Is there a way to make some kind of conditional statement, in either HTML or JavaScript (JS I imagine!), that will tell browser to only use that JavaScript (js/softscroll.js) ...IF ... the visitor is ONLY viewing the normal site, and... obviously ignore the js/softscroll.js file IF the mobile version of the site is being accessed?
Whoaw! I hope you understand what the hell I'm going on about!? Ha! Your probably wondering what I'm trying to achieve here, or why I'm so into this javascript effect? Long story, but let's just say I'm making one of those crazy side scrolling websites and it's vital! :0)
So yeh? any help welcome! Thanks for your time!
You can conditionally load a script with jQuery:
http://api.jquery.com/jQuery.getScript/
if(mainsite) $.getScript('js/softscroll.js');
UPDATE
First, when you need Javascript, you REALLY need jQuery. Best to download it and put it on your site - http://jquery.org
But here's a way that might work now:
in the head section of your app:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
Next, you need a way to know if your site is being accessed by a mobile device or not:
<script>
var platform = navigator.platform.toLowerCase();
var mobile = platform.match(/(iphone|ipod|ipad|android)/);
Then, you need to conditionally load your special script:
if(!mobile) $.getScript('js/softscroll.js');
</script>
Those six lines of code, added to the head section of your site, will probably do for now:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var platform = navigator.platform.toLowerCase();
var mobile = platform.match(/(iphone|ipod|ipad|android)/);
if(!mobile) $.getScript('js/softscroll.js');
</script>
you can use mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/
i prefer adapt.js https://github.com/nathansmith/adapt
As Matt H (+1) correctly pointed out, you can conditionally load a script using JS.
Also, you can see an article which deals with Viewport size here.

Categories