Embed a short compact version of a Gist in HTML - html

Ok, so here for example let's say I want to embed a long gist such as doing:
<script src="https://gist.github.com/benanne/3274371.js"></script>
Link to gist: https://gist.github.com/benanne/3274371
However, the embedded Gist is too long in my webpage and I would like it to show as just a few lines that could be either scrolled or unwrapped by clicking, etc.
Is that possible? How?

Wrap the gist call in a container, style that and job done.
Edit just noticed the requirement to show/hide all, jQuery makes this trivial, you haven't mentioned jQuery or javascript in your question so I've come up with a hacky CSS/html option using target
.gistcontainer {
max-height: 300px;
overflow: auto;
}
.gistcontainer:target .show {display:none;}
.gistcontainer:target {max-height:none;}
<div class="gistcontainer" id="gist1">
More...
<script src="https://gist.github.com/benanne/3274371.js"></script>
</div>
This SO Question may also be of interest, particularly the fact the CSS classes used by gist seem to have changed over time, so a "wrapped" solution may be more future proof.

Related

Is there any other way to fix this problem besides using !importand after every line css

I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first

Which css style has least effect on an element?

Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.

How to make jquery-ui tabs no linebreak?

Recently, I use JQuery-UI tabs(http://jqueryui.com/tabs/) and get stuck when I try to use many tabs-nav li-s.
The excessive tabs-nav li-s go to the next line.
I want it to go in one line, with no linebreak, and scroll when it needs.
I serach for a lot of questions, and try many ways, but none solve mine.
Similar questions but not jquery-ui tabs are: Divs next to each other, with size, no linebreak
Wait for your valuable answers!
=============
Refer the html source codes here:Example
And the CSS are:
/* JQuery-UI tabs overwrites - set the width as small as possible! */
.ui-tabs { width:100px; }
.ui-tabs .ui-tabs-nav {}
.ui-tabs .ui-tabs-nav li {}
We did this on Compilr.com by hacking up the existing jquery-ui tabs plugin and the markup for it. I'm working on getting it cleaned up so we can open source it as a plug-in but for now you might just have to try and pick it apart using firebug or equivalent. I've been re-writing it from scratch and it's not quite done yet but I'll keep you posted.
Changing the markup and css around the tabs were really the key component to pulling this off.
EDIT:
I've started a very basic implementation using bootstrap. You can fork it on GitHub here: https://github.com/MarkMurphy/slidetabs

Why won't my paypal button center in my page

So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.

Resizable frame emulation

I understand that <frameset> and <frame> tag are becoming deprecated. Is there a way to emulate resizable frames? What I want is a narrow separator separating the area either horizontally or vertically, which is movable by the user so that when one side of it becomes smaller, the other side becomes larger, and vice versa. I do not want to fill in each frame with an html page like the conventional frame, but instead with some DOM materials.
I know that CSS3 has resize attribute, but that controls only the size of itself. I am not sure if this is to be used for the solution.
I don't particularly prefer using JavaScript, but I am not excluding the possibility of using it if necessary.
Do not use frameset, please. I don't think jQuery resize will help you much, either.
The best way to do this is by using a "splitter". There are several plugins for jquery that will do this in many different way and they all are actually quite simple.
I have previously used this one: http://methvin.com/splitter/
You can find a nice demo here: http://methvin.com/splitter/3psplitter.html
From my point of view jQuery Resizable or such js things is your solution. Go for it's demos.
In case of using jQuery you'll have extra possibilities:
Maximum / minimum size
Constrain resize area
Delay start
Snap to grid
Here is a sample code for jQuery Resizable default functionality:
<style>
#resizable {
width: 150px;
height: 150px;
display: block;
border: 1px solid gray;
text-align: center;
}
</style>
<script>
$(function() {
$("#resizable").resizable();
});
</script>
<div id="resizable">
<h3>Resizable</h3>
</div>
You may like this link for YUI
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html
Example:
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html
Janus Troelsen's solution above is great if you don't mind tables.
I also found this solution by SoonDead without tables, which worked great with Chrome and FF, but had to spend a nasty amount of time for IE8. It's on StackOverflow as "Emulate Frameset Separator Behavior"
I would look into Javascript and drag and drop support.
In fact, an emulated frameset could be just two divs and a handle between them which can be grabbed to resize. JQuery has samples to demonstrate how to resize an element: http://jqueryui.com/demos/resizable/ I don't think it would be very difficult to expand that concept to fit.
Then I would load the documents via AJAX, and this could probably replace frames completely.