Input multiple iFrame Source from Form Input with http - forms

I have the following code that I found on here.
If I type in http://google.com
It loads google.com into the iframe.
My question is,
How can I have more than 1 iframe to be filled
Can I have it so that I do not have to put in http:// just the domain, google.com
Thanks, Here is the code:
<html>
<head>
<title>Blah</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
Thanks alot. That is exactly what I was looking for! Here it is completed:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme3").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme4").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme5").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme6").src = 'http://' +
document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<div style="clear:both">320 width</div>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="480" width="320"
scrolling="yes"></iframe>
<div style="clear:both">480 width</div>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="480" width="480"
scrolling="yes"></iframe>
<div style="clear:both">640 width</div>
<iframe id="myIfreme3" src="" frameborder="0" marginwidth="0" height="480" width="640"
scrolling="yes"></iframe>
<div style="clear:both">800 width</div>
<iframe id="myIfreme4" src="" frameborder="0" marginwidth="0" height="480" width="800"
scrolling="yes"></iframe>
<div style="clear:both">1024 width</div>
<iframe id="myIfreme5" src="" frameborder="0" marginwidth="0" height="480" width="1024"
scrolling="yes"></iframe>
<div style="clear:both">1280 width</div>
<iframe id="myIfreme6" src="" frameborder="0" marginwidth="0" height="480" width="1280"
scrolling="yes"></iframe>
</body>
</html>
THANKS alfasin - You are AWESOME!


Try:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
If you don't want the user to enter http:// you can do:
...
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
...
and
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' + document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' + document.getElementById("txtSRC").value;
}
BTW, Google will block you from using www.google.com in an iframe.

Related

iframe src from form input

any ideas how to have say a set url for iframe like mysite.com/ and then this input form would add the input field to the end like mysite.com/txtsrc?
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
so rather than user inputting the full src i want mysite.com/then the form input after that but so user would not have to put mysite.com/
thanks in advance
i have tried but failed anyone able to help?

Cannot read property "from" of undefined

"You need show full error, where does it happen, etc."
There is a .php file (view) on Joomla 2.5.1 with a code snippet:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(function drawMachines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Machine');
data.addColumn('number', 'Printed');
data.addRow(['LP-3000', 69174.8542]);
data.addRow(['MPS', 74595.0154]);
data.addRow(['MPS-2', 85626.7536]);
data.addRow(['Digicon', 650.1061]);
data.addRow(['Indigo-4500', 17630.4017]);
data.addRow(['KDO-508', 15414.495]);
data.addRow(['MP', 0.0237]);
var options = {
'title': 'For machines'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_machines'));
chart.draw(data, options);
});
</script>
<div class="com_fp_infopanel_manufacture">
<div id="com_fp_infopanel_manufacture_machines" class="com_fp_infopanel_manufacture_machines"></div>
<div class="clear"></div>
</div>
I get an error: "Cannot read property "from" of undefined".
Has anyone encountered such an error?
Perhaps someone can suggest what is the reason?
The view-source code:
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" lang="ru"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="ru"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="ru"> <!--<![endif]-->
<head>
<base href="http://infopanel.fleksoprint.ru/index.php" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="50; URL='index.php?option=com_fp_infopanel&view=sales&layout=0'; charset=utf-8" />
<meta name="generator" content="J!Blank Template by Joomla-book.ru" />
<title>Flexo Print</title>
<link href="/templates/jblank/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/media/com_fp_infopanel/site/css/manufacture.css" type="text/css" />
<link rel="stylesheet" href="/templates/jblank/css/base.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/jblank/css/grid.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/jblank/css/_styles.css?1346224085" type="text/css" media="all" />
<link rel="stylesheet" href="/media/mod_fp_infopanel/css/shipping.css" type="text/css" />
<link rel="stylesheet" href="/media/mod_fp_infopanel/css/birthday.css" type="text/css" />
<script src="/templates/jblank/js/libs/jquery.min.js?v=1.7.1" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/modernizr.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.tools.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery-ui.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.mousewheel.min.js?1346224085" type="text/javascript"></script>
<script src="/templates/jblank/js/libs/jquery.smoothdivscroll.min.js?1346224085" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/excanvas.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/coolclock.js" type="text/javascript"></script>
<script src="/media/mod_coolclock/assets/js/moreskins.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div class="grid_2 content">
<div class="module module-left module-header "><h3 class="module-header">Часы</h3><div class="module-content">
<script type="text/javascript">
$(document).ready(function() {
function mod_coolclock132_date_refresh()
{
var months = [];
months.push('Января');
months.push('Февраля');
months.push('Марта');
months.push('Апреля');
months.push('Мая');
months.push('Июня');
months.push('Июля');
months.push('Августа');
months.push('Сентября');
months.push('Октября');
months.push('Ноября');
months.push('Декабря');
var weekdays = [];
weekdays.push('Воскресенье');
weekdays.push('Понедельник');
weekdays.push('Вторник');
weekdays.push('Среда');
weekdays.push('Четверг');
weekdays.push('Пятница');
weekdays.push('Суббота');
var today = new Date();
var date = '<h4>' + weekdays[today.getDay()] + ', ' + today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
$('#mod_coolclock_date132').html(date);
}
window.setInterval(mod_coolclock132_date_refresh, 60000);
mod_coolclock132_date_refresh();
});
</script>
<div style="text-align: center; border-radius: 0 0 5px 5px; border-style: ridge; border-width: 3px;">
<div><canvas id="clock132" class="CoolClock:swissRail:68::+4"></canvas></div>
<div id="mod_coolclock_date132"></div>
</div></div></div><div class="module module-left module-header "><h3 class="module-header">Время прихода</h3><div class="module-content">
<script type="text/javascript">
$(document).ready(function () {
$("#mod_fp_infopanel_birthday_employees135").smoothDivScroll({
mousewheelScrolling: false,
manualContinuousScrolling: false,
hotSpotScrolling: false,
autoScrollingMode: "always",
autoScrollingDirection: "endlesslooptop"
});
});
</script>
<div id="mod_fp_infopanel_birthday_employees135" class="mod_fp_infopanel_birthday_employees">
<div class="scrollWrapper">
<div class="scrollableArea">
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:46:18 - Кудинов Сергей Борисович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:36:04 - Логинов Роман Викторович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:11:28 - Мазин Александр Петрович</p>
<p style="clear: both;"/>
<!-- <p style="clear: both;"/>
<div style="background-color: #2F6309;width:32px;height:12px;margin-top:6px;margin-left:5px;"></div>
<div style="color: #FFFFFF;padding:4px;font-weight:bold;font-size:10px;text-align:center;position:relative;margin-top:-17px;margin-bottom:-2px;">Авг</div>
<div style="color: #2F6309;font-weight:bold;font-size:1.3em;width:42px;text-align:center;">18</div>
</div>-->
<p class="mod_fp_infopanel_birthday_employee">09:05:50 - Семенова Дарья Витальевна</p>
<p style="clear: both;"/>
</div>
</div>
</div>
</div></div>
</div>
<div class="grid_8 content">
<div class="module module-middle module-header "><h3 class="module-header">Показатели компании</h3><div class="module-content"><script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function dateInFuture(days)
{
var now = new Date();
now.setDate( now.getDate() + days );
return now;
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Машина');
data.addColumn('date', 'Загрузка');
data.addRows([['MPS', dateInFuture(5.3083425954183)]]);
data.addRows([['MPS-2', dateInFuture(10.435140861034)]]);
data.addRows([['LP-3000', dateInFuture(3.3856865581936)]]);
data.addRows([['Indigo-4500', dateInFuture(0.019926592893071)]]);
var options = {
title: 'Загрузка печатного оборудования',
titleTextStyle: { fontSize: '12'},
legend: {position: 'none'},
hAxis: {format: 'dd MMM', minValue: new Date()},
enableInteractivity: false
};
var chart = new google.visualization.BarChart(document.getElementById('mod_fp_infopanel_shipping_load136'));
chart.draw(data, options);
});
</script>
<div class="mod_fp_infopanel_shipping_container">
<div id="mod_fp_infopanel_shipping_kpi136" class="mod_fp_infopanel_shipping_kpi">
<dl class="mod_fp_infopanel_shipping_Bar">
<dt class="mod_fp_infopanel_shipping_BarLabel">ВП</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 40.243306389056%;">40.2%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">101 164,83 EUR. / 251 383,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Отгрузка</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 40.930513139422%;">40.9%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">250 437,85 EUR. / 611 861,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Произведено</dt>
<dd class="mod_fp_infopanel_shipping_BarScale">
<div class="mod_fp_infopanel_shipping_BarFilled" style="width: 42.998597671693%;">43.0%<strong> </strong></div>
<div class="mod_fp_infopanel_shipping_BarAnotation">263 091,65 EUR. / 611 861,00 EUR.</div>
</dd>
<dt class="mod_fp_infopanel_shipping_BarLabel">Склад</dt>
<dd class="mod_fp_infopanel_shipping_BarPanel">
<div class="mod_fp_infopanel_shipping_BarValueText">47 306,65 EUR.</div>
</dd>
</dl>
</div>
</div>
<div id="mod_fp_infopanel_shipping_load136" class="mod_fp_infopanel_shipping_load"></div>
<div class="clear"></div>
</div></div><div class="module module-middle module-header "><div class="module-content">
<div class="custom" >
<hr /></div>
</div></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
// Разбивка по машинам
google.charts.setOnLoadCallback(function drawMachines() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Машина');
data.addColumn('number', 'Отпечатано');
data.addRow(['LP-3000', 69174.8542]);
data.addRow(['MPS', 74595.0154]);
data.addRow(['MPS-2', 85626.7536]);
data.addRow(['Digicon', 650.1061]);
data.addRow(['Indigo-4500', 17630.4017]);
data.addRow(['KDO-508', 15414.495]);
data.addRow(['МП', 0.0237]);
var options = {
'title': 'По машинам'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_machines'));
chart.draw(data, options);
});
// Разбивка по сменам
google.charts.setOnLoadCallback(function drawShifts() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Бригада');
data.addColumn('number', 'Отпечатано');
data.addRow(['Катайкин', 48949.1127]);
data.addRow(['Владимиров', 55795.0403]);
data.addRow(['Шурыгин', 56640.1172]);
data.addRow(['Ломакин', 68120.6211]);
data.addRow(['Кононенко', 4385.4825]);
data.addRow(['Спиридонов', 8308.4379]);
data.addRow(['Станчев', 5418.9761]);
data.addRow(['Галушкин', 8535.9824]);
data.addRow(['Голев', 2884.7224]);
data.addRow(['Салтыков', 3993.7902]);
data.addRow(['Контракт', 59.3432]);
var options = {
'title': 'По бригадам'
,'titleTextStyle': {fontSize: '12'}
,'legend': {position: 'none'}
,'enableInteractivity': false
};
var chart = new google.visualization.ColumnChart(document.getElementById('com_fp_infopanel_manufacture_shifts'));
chart.draw(data, options);
});
</script>
<div class="com_fp_infopanel_manufacture">
<div id="com_fp_infopanel_manufacture_machines" class="com_fp_infopanel_manufacture_machines"></div>
<div id="com_fp_infopanel_manufacture_shifts" class="com_fp_infopanel_manufacture_shifts"></div>
<div class="clear"></div>
</div>
</div>
<div class="grid_2 content">
</div>
<div class="clear"></div>
<div class="modules-bottom content grid_12">
<div class="module module-bottom module-grid grid_12 "><div class="module-content">
<div class="custom" >
<p><img src="https://info.weather.yandex.net/38/2_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода" /><img src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" border="0" alt="" width="1" height="1" /></p></div>
</div></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

The problem was solved this way:
...
google.charts.load('44', ...
...
Look at: https://developers.google.com/chart/interactive/docs/release_notes#official-releases

Ionic v1 placing icon in or next to input field

I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>

You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>

Bootstrap carousel not sliding on iphone

I'm building a responsive webpage with bootstrap plugin. Everything works fine in desktop browsers, even in low resolution and toggle device mode (chrome). But when i open the page on chrome or safari, on my iphone, the carousel just don't slide. It goes to the next slide, but without using the sliding effect.
This is the URL: http://diogoalmeida.pt/2/index.html
This is my HTML code:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- 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>
<body>
<!--Menu -->
<nav class="navbar navbar-fixed navbar-green" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav nav-green navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container-fluid myCarousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
<div class="item">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div class="container">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
</a>
</div>
</div>
<!-- JQuery -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Blueimp Gallery -->
<script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
</body>
</html>

Problem solved, the bootstrap auto compiler (website) wasn't including vendor prefixes.
Solution here -> https://github.com/twbs/bootstrap/issues/14973

similar problem .....my problem was that the images were not sliding to the next on small screens , i added to the head and it worked
<script src="../resources/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../resources/assets/js/smoothproducts.min.js"></script>
<script src="../resources/assets/js/theme.js"></script>

Input iFrame Source from Form Input

I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>

Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>