Twitch.tv used to offer its users the ability to upload a channel background, but has long since removed this feature. I've been trying to add it back, and been unsuccessful.
This is what I am working with here, from twitch:
Note: the ember### and data-bindattr-###="###" change often, so I didn't bother trying to tag those.
<div id="ember841" class="ember-view" data-channel="jimieo">
<div class="content" data-bindattr-857="857">
<div id="channel">
<script id="metamorph-26-start" type="text/x-placeholder"></script>
<script id="metamorph-26-end" type="text/x-placeholder"></script>
<script id="metamorph-27-start" type="text/x-placeholder"></script>
<script id="metamorph-28-start" type="text/x-placeholder"></script>
<div id="ember872" class="ember-view"></div>
<script id="metamorph-28-end" type="text/x-placeholder"></script>
<script id="metamorph-27-end" type="text/x-placeholder"></script>
<div class="player-column host-frame js-host-frame" data-bindattr-874="874"></div>
</div>
</div>
</div>
I was trying to use the following to get it to work:
$(document).ready(function(){
$("#data-channel=jimieo > div#channel").prepend("<canvas height="1080" width="1920" image="i.imgur.com/5su8sTX.jpg"></canvas>");
});
The end result I was aiming for was this...
<div id="ember841" class="ember-view" data-channel="jimieo">
<div class="content" data-bindattr-857="857">
<div id="channel">
<canvas height="1080" width="1920" image="i.imgur.com/5su8sTX.jpg"></canvas>
<script id="metamorph-26-start" type="text/x-placeholder"></script>
<script id="metamorph-26-end" type="text/x-placeholder"></script>
<script id="metamorph-27-start" type="text/x-placeholder"></script>
<script id="metamorph-28-start" type="text/x-placeholder"></script>
<div id="ember872" class="ember-view"></div>
<script id="metamorph-28-end" type="text/x-placeholder"></script>
<script id="metamorph-27-end" type="text/x-placeholder"></script>
<div class="player-column host-frame js-host-frame" data-bindattr-874="874"></div>
</div>
</div>
</div>
Not sure if this is the best way to do it but just tested it works via browser console.
$(document).ready(function(){
$("<style type='text/css'> .js-directory, tse-content { background: #000000 url('http://i.imgur.com/5su8sTX.jpg') no-repeat fixed center !important; } </style>").appendTo("head");
});
Related
Help me please, i have this libs:
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
and this is the html code:
<div class="ui container">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Hello
</div>
<div class="content">
contenido 1
</div>
</div>
</div>
and js:
<script>
$('.ui.accordion').accordion();
</script>
What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:
TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)
you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr, so the page is never actually loading your libraries. So change:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
TO:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
You forgot to put accordion module.
Simple add after semantic.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
I want to create a click-able image that has a name,class and id, if I click on that image it should show the id of that image without using database or post.For example:
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink" />
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink" />
</div>
If I click one of the images, it should display the id swimmingDrop or runningDrop.
simply onclick="alert(this.id)"
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink"
onclick="alert(this.id)"/>
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink"
onclick="alert(this.id)"/>
</div>
and as I said in comment while you tagged jquery this is jquery solution
$('img').on('click', function(){ alert($(this).attr('id')) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink"/>
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink"/>
</div>
I suggest using jquery as it will make life easier:
$('img').on({
click: function(){
alert($(this).attr("id"));
}
})
<html>
<head>
<title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('img').click(function () {
alert($(this).attr("id"));
});
});
</script>
</head>
<body>
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink" />
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink" />
</div>
</body>
</html>
Hi Im trying to get my code to work for checking if the html is right in the textarea. If it is right it will open another page with what was in the textarea already as a website (this part works I checked before creating the if else). I only want that to happen if the code in the textarea is the same as what I put in my value in javascript (this dosent work). Heres my whole html for that page.
<!DOCTYPE html>
<html>
<head>
<title>Lesson 1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 1 HTML Syntax</div>
<div class="panel-body">
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;" onblur="x=this.value">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote>
</textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Try it out</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The part that doesn't work is:
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
The value x is given on the textarea onblur="x=this.value".
Any help?
Textareas have no value attribute. You need to use innerHTML
I solved my problem by like dis (the reason it wasn't working was because of the spacing):
<!DOCTYPE html>
<html>
<head>
<title>Lesson 0</title>
<link rel="icon" type="image/png" href="favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function ShowResult()
{
var x = document.getElementById("html").value
var z = document.getElementById("answer").value
if (x === z) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 0 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will show up when you are right. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 0 Geting started</div>
<div class="panel-body">
The first lesson will be a tutorial on how to use this website. This part of the webpage is the part that teaches about code and gives you examples. Below is what you will need to do to complete this lesson. The gray box is your code editor. Inside it you will write your code for the lesson. Good luck on your first lesson (click answers if you need help).
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Steps</li>
<li class="">Answer</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">1.</h4>
<p class="list-group-item-text">Click on the code editor and between the <code><h1></code> and <code></h1></code> tags write <kbd>Advertisement</kbd></p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">2.</h4>
<p class="list-group-item-text">Click Submit on the bottom of the page</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="profile">
<textarea id="answer" style="font-size:15px; resize: none; height: 400px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #F9F9F9; color: #6F6F6F;">
<h1>Advertisement</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea id="html" style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Submit</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I m trying to make a slider using jquery..i downloaded the cycle plugin for my slider and included that too in my file...i m using 7 pic for my slider.. below is the code...please tell what is the problem
<!DOCTYPE html>
<html>
<head>
<style>
#hero{width:200px;height:220px;display:block;position:relative;margin:auto;border-style:solid;border-color:grey;}
#slider{width:200px;height:200px;display:block;position:absolute;}
#next{display:block;float:right;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
#prev{display:block;float:left;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
</style>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
timeout: 2000,
next: '#next',
prev: '#prev'
});
</script>
</head>
<body>
<div id="hero">
<div id="prev">
<img src="right.jpg">
</div>
<div id="next">
<img src="left.jpg">
</div>
<div id="slider">
<div id="1"><img src="1.jpg"></div><br><br>
<div id="2"><img src="2.jpg"></div><br>
<div id="3"><img src="3.jpg"></div><br>
<div id="4"><img src="4.jpg"></div><br>
<div id="5"><img src="5.jpg"></div><br>
<div id="6"><img src="6.jpg"></div><br>
<div id="7"><img src="7.jpg"></div><br>
</div>
</div>
</body>
</html>
Have you tried to change the position of plugins? Shouldn't <script type="text/javascript" src="jquery-2.1.0.min.js"></script> be before <script type="text/javascript" src="jquery.cycle.all.js"></script>?
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>