jQuery:Ajax Don't work loaded scripts - javascript

I have this code :
//--Async load page
$("body").on("click", "a:not([data-noajax])", function(){
href = $(this).attr("href");
pageLoad(href + " .page-wrapper", ".page-wrapper", href);
//$('#header').load(href+' #header');
//$('#footer').load(href+' #footer');
return false;
});
function pageLoad(from, where, href)
{
href = typeof href === 'undefined' ? "" : href;
loading();
//$(where).empty();
$(where).load(from, function(data){
loading(false);
$("html, body").animate({ scrollTop: $(".page-header h1").offset().top }, "slow");
title = $(".page-header h1").text();
parent.location.hash = href;
window.history.pushState($(document).html(), title, href);
document.title = title;
$(document).ready(function() {
$('.page-header h1').text(title);
})
});
}
//--
working, but....scripts which will load another page don't work ((
example : go on the http://amour05.ru , click on some post title, and after try reload page;
first we don't see comments widget, and after reload we see it.
p.s. sorry for my english ((
RIGHT SOURCE CODE :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device_width, initial_scale=1.0" />
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/style.css" />
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css" />
<script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body>
<div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input type="search" name="search_text" value="" class="search-query" placeholder="Поиск">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"
data-yashareTitle="кто знает расписание пересдач ..." data-yashareDescription ="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>" ></div>
</div>
</div>
<script type="text/javascript">
VK.init({apiId: 4092141, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "100%", attach: "*", mini: "auto"}, 1560 );
VK.Observer.subscribe("widgets.comments.new_comment", commentAdd);
VK.Observer.subscribe("widgets.comments.delete_comment", commentDel);
function commentAdd(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_add',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
function commentDel(num, last, date, sign)
{
$.post('/ajax.php',{
type: 'vk_comment_del',
num: num,
last_comment: last,
date: date,
sign: sign,
id: "1560"
});
}
</script>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">34</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">10</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter23555398 = new Ya.Metrika({id:23555398,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div>
</body>
</html>
GENERATED SOURCE :
<html data-savefrom-tab-data="{"module":"lm","tooltip":"Найдено ссылок: 0"}" lang="ru"><head>
<meta charset="utf-8">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device_width, initial_scale=1.0">
<title>кто знает расписание пересдач ...</title>
<style>
body { padding-top: 60px;}
</style>
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/theme/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/theme/style/style.css">
<link rel="stylesheet" type="text/css" href="/theme/style/jquery/jquery-ui.css">
<script src="http://mc.yandex.ru/metrika/watch.js" async="" type="text/javascript"></script><script type="text/javascript" src="/theme/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="/theme/scripts/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="/theme/scripts/custom.js"></script>
<script type="text/javascript" src="//yandex.st/share/share.js"></script>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
</head>
<body data-savefrom-link-count="20" style="background-image: url("/theme/style/loveimgs/4.jpg");">
<div title="Загрузка" style="max-width: 500px;" id="loading" class="i hide"><img src="/theme/style/imgs/busy.gif" alt="загрузка"> идет загрузка</div><div class="page-wrapper"><div class="page-wrapper">
<div class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form id="search" action="/search.php" class="navbar-search pull-right" method="POST">
<input name="search_text" value="" class="search-query" placeholder="Поиск" type="search">
</form>
<a class="brand" href="/">amour05.ru</a>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="span3">
<div class="well well-sm">
<ul class="nav nav-list">
<li class="nav-header">Меню</li>
<li>Главная</li>
<li class="divider"></li>
<li class="active"><a id="add_post" href="/add.php">Добавить признание</a></li>
<li>Поиск по сайту</li>
<li><a id="feedback" href="/feedback.php">Написать админу</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="page-header well">
<h1>кто знает расписание пересдач ...</h1>
</div>
<div class="well">
<div class="post">
<div class="post_title"><h3 class="title">Анонимно</h3></div>
<div class="post_text">
кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>
</div>
<div class="post_data">
<div style="text-align: center" class="yashare-auto-init" data-yasharel10n="ru" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetitle="кто знает расписание пересдач ..." data-yasharedescription="кто знает расписание пересдач 3-его курса ЮФ пожалуйста скиньте.спасибо огромное)) <br><br>"></div>
</div>
</div>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
</div>
</div>
<div class="span3">
<div class="well well-sm">
<div class="panel panel-info">
<div class="panel-heading">Статистика</div>
<div class="panel-body">
<ul class="nav nav-list">
<li class="list-group-item">31.01.2014 18:58</li>
<li class="list-group-item">комментариев : <span class="badge badge-info pull-right">0</span></li>
<li class="list-group-item">просмотров : <span class="badge badge-info pull-right">26</span></li>
<li class="list-group-item">уникальных : <span class="badge badge-info pull-right clearfix">8</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav hidden-phone">
<li class="active">Главная</li>
<li class="divider-vertical"></li> <!-- Вертикальный разделитель -->
<li>О проекте</li>
</ul>
</div>
<div class="span6">
<!-- Yandex.Metrika counter -->
<noscript><div><img src="//mc.yandex.ru/watch/23555398" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript" src="/theme/bootstrap/js/bootstrap.min.js" ></script>-->
</div></div>
</body></html>

Related

Javascript particle animated background

i am trying to use this :
http://jnicol.github.io/particleground/
to animate my existing webpage's body.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login - CloudMe - Responsive Web Hosting HTML Template</title>
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/morphext.css" />
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="javascript" href="javascript/app.js">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="style.css" />
<script src="js/vendor/modernizr.js"></script>
<script type='text/javascript' src='../jquery.particleground.js'></script>
<script type='text/javascript' src='js/demo.js'></script>
</head>
<body class="login-page">
<!-- HEADER -->
<header class="login">
<div class="top">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<div class="logo">
<img src="images/logo.png" alt="" title=""/>
</div>
</div>
<div class="small-12 large-9 medium-9 columns">
<!-- NAVIGATION MENU AREA -->
<nav class="desktop-menu">
<ul class="sf-menu">
<li class="special"> <font size="4"><b>HOME</b>
<ul>
<li><font size="2"><font size="2"><b>FEATURES</li>
<li><font size="2"><b>SELECT A SERVER</li>
<li><font size="2"><b>TESTIMONIALS</li>
</ul>
</li>
<li class="special"><font size="4" class="special"><b>HOSTING</b>
<ul>
<li><font size="2"><b>GAME SERVERS</b></li>
<li><font size="2"><b>WEBSITE HOSTING</b></li>
<li><font size="2"><b>DEDICATED SERVERS</b></li>
</ul>
</li>
<li><font size="4" class="special"><b>SUPPORT</b>
</li>
<li class="current-menu-item"><font size="4" class="special"><b>LOGIN</b></li>
<li><font size="4"class="special"><b>CONTACT</b>
</li>
</ul>
</nav>
<!-- END OF NAVIGATION MENU AREA -->
<!-- MOBILE MENU AREA -->
<nav class="mobile-menu">
<ul>
<li>HOME</li>
<li>HOSTING
<ul>
<li>SHARED HOSTING</li>
<li>CLOUD VPS</li>
<li>DEDICATED SERVERS</li>
</ul>
</li>
<li>DOMAINS</li>
<li>PAGES
<ul>
<li>SUPPORT</li>
<li>LOGIN</li>
<li>TESTIMONIALS</li>
<li>TYPOGRAPHY</li>
</ul>
</li>
<li>BLOG
<ul>
<li>CATEGORY</li>
<li>SINGLE POST</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
<!-- END OF MOBILE MENU AREA -->
</div>
</div>
</div>
</header>
<!-- END OF HEADER -->
<!-- LOGIN FORM -->
<div class="login-container" div id="particles">
<div class="row">
<div class="small-12 large-7 large-centered medium-7 medium-centered columns">
<div class="login-form">
<form method="post">
Email Address: <input type="text" name="username" size="50" />
Password: <input type="password" name="password" size="20" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="row">
<div class="small-12 columns">
<div class="contacts">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-map-marker"></i>
PORTLAND, OR, USA
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-mobile"></i>
+1 299-670-9615
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-comments"></i>
LIVE CHAT
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-envelope-o"></i>
E-MAIL US
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="footerlinks">
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Hosting Services</h2>
<ul>
<li>Shared Hosting</li>
<li>Managed VPS</li>
<li>Dedicated Services</li>
<li>Become a Reseller</li>
<li>Special Offers</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Company</h2>
<ul>
<li>About us</li>
<li>Blog</li>
<li>Terms of Service</li>
<li>Acceptable Use Policy</li>
<li>Affiliates</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Add-on Services</h2>
<ul>
<li>SSL Certificates</li>
<li>Dedicated IPs</li>
<li>Control Panel Licenses</li>
<li>WHMCS License</li>
<li>Migrations / Transfers</li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns">
<h2>CloudMe Newsletter</h2>
<p>Sign up for special offers:</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<!--SOCIAL LINKS -->
<div class="social">
<div class="row">
<div class="small-12 columns">
<ul class="small-block-grid-1 large-block-grid-5 medium-block-grid-5">
<li class="facebook">FACEBOOK</li>
<li class="twitter">TWITTER</li>
<li class="googleplus">GOOGLE+</li>
<li class="linkedin">LINKEDIN</li>
<li class="pinterest">PINTEREST</li>
</ul>
</div>
</div>
</div>
<!-- END OF SOCIAL LINKS -->
<p class="copyright">© Copyright CloudMe, all rights reserved. </p>
</footer>
<!-- END OF FOOTER -->
<i class="fa fa-angle-up"></i>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/vendor/hoverIntent.js"></script>
<script src="js/vendor/superfish.min.js"></script>
<script src="js/vendor/morphext.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/vendor/jquery.animateNumber.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/masonry.pkgd.min.js"></script>
<script src="js/custom.js"></script>
<script>
var container = document.querySelector('.testimonialsContainer');
var msnry = new Masonry( container, {
// options
itemSelector: '.testimonial-item'
});
</script>
</body>
</html>
This is my current code , as you can see , i have given a div the id of "particles" in order to trigger to particle effect, and it works...
Kind of.
My webpage is now shifted down quite a lot , like this
https://gyazo.com/ca1e33a319111fd779e96ff890ec9b9b
As you can see everything has been pushed down the page by the particle effect. I have worked for hours to try and fix this and would appreciate any help anyone can offer. Thanks , James.

Adding attribute value to each <p>

I'm having struggle accomplishing this :
I want jQuery to grab class name of each icon and write it in each p element
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
jQuery
function idk() {
var icon_class = $(".icon i").attr("class"),
icon_container = $(".col-md-4"),
icon_p = $('.col-md-4 p');
icon_p.each(function(){
icon_p.text(icon_class);
})
};
$(document).ready(function () {
idk();
});
JsFiddle
https://jsfiddle.net/277gpp7r/2/
This code only duplicates the first icon class name and writes it in all "p" elements instead grabbing the each class name, but this is not what I'm trying to accomplish.
I would appreciate any help, thanks in advance everyone!

I would loop through the i's, store the class in a var, then find the .col-md-4 ancestor and target the p in it and then add the class text to the p
function idk() {
$('.icon i').each(function() {
var icon_class = $(this).attr("class"),
$icon_p = $(this).closest('.col-md-4').find('p');
$icon_p.text(icon_class);
});
}
$(document).ready(function() {
idk();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
</body>

function idk() {
var icon_class = $(".icon i").map(function(){
return $(this).attr("class")
}).get().join( " " )
icon_container = $(".col-md-4"),
icon_p = $('.col-md-4 p');
icon_p.each(function() {
icon_p.text(icon_class);
})
};
$(document).ready(function() {
idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p>1</p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p>2</p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p>3</p>
</div>
</div>
</div>
</div>
Map all the class into one array.
Then use that array as the text of each p

Try some thing like this.
function idk() {
$('.col-md-4').each(function(){
var icon_class = $(this).find(".icon i").attr("class");
console.log(icon_class);
icon_container = $(".col-md-4");
icon_p = $(this).find('p');
icon_p.text(icon_class);
});
};
$(document).ready(function () {
idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

You can do like this
function idk() {
var icon_p = $('.col-md-4 p');
icon_p.each(function(i, v) {
find the i & its class in previous div and add it t the element
var findClass = $(this).prev('div.icon').find('i').attr('class');
$(this).attr('class', findClass);
})
};
DEMO

text(function) is shortest way to do this:
$('.col-md-4 p').text(function(){
return $(this).prev().find('i').attr('class')
})
p{border:1px solid #ccc; margin-top:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="text-center">
<div class="row">
<div class="col-md-4">
<div class="icon"><i class="icon-class-1"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-2"></i></div>
<p></p>
</div>
<div class="col-md-4">
<div class="icon"><i class="icon-class-3"></i></div>
<p></p>
</div>
</div>
</div>
</div>

semantic ui popup does not work

Here is a simple dropdpwn popup example from semantic-ui which fails to work:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="example">
<div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colors</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
<a class="item">
<i class="cart icon"></i>
Checkout
</a>
</div>
</div>
<div id="web_content">
</div>
<div id="web_footer">
</div>
</form>
<script type="text/javascript">
$('.example .menu .browse').popup({
inline: true,
hoverable: true,
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
</script>
</body>
when I click/hover on browse nothing happens. i don't know enough about jquery selectors tough. thanks for reading.

Framework7 : Navbar hidden when I'm move to anothers views

I'm learning Framework7 now, but I'm stuck in this problem. I have created two pages, this is the file
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab7">
<title>Ciptaloka Editor</title>
<link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/framework7.material.min.css">
<link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="theme-teal">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<!-- off canvas -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
a
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel" data-panel-left>
<i class="icon material-icons">menu</i>
</a>
</div>
<div class="center">
Custom T-Shirt
</div>
<div class="right">
<a class="link">
Done
</a>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#produk" class="link tab-link active">
<i class="icon material-icons">dashboard</i>
<span class="tabbar-label">Produk</span>
</a>
<a href="#image" class="link tab-link">
<i class="icon material-icons">add_a_photo</i>
<span class="tabbar-label">Image</span>
</a>
<a href="#text" class="link tab-link">
<i class="icon material-icons">text_fields</i>
<span class="tabbar-label">Text</span>
</a>
<a href="#clipart" class="link tab-link">
<i class="icon material-icons">photo_filter</i>
<span class="tabbar-label">Clipart</span>
</a>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
<div class="tabs">
<div class="tab active" id="produk">
Go home 2
</div>
<div class="tab" id="image">
Image
</div>
<div class="tab" id="text">
Text
</div>
<div class="tab" id="clipart">
Clipart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>
index2.html
<div data-page="index2" class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel">
<a href="index.html">
<i class="icon material-icons">back</i>
</a>
</a>
</div>
<div class="center">
Custom Case
</div>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
Success direct page
</div>
</div>
</div>
When I'm click 'go home 2' at index.html, its succesfully direct to index2.html, content is shown, but not with the navbar, its only shown a background, but the text is hidden. This my screenshoot :
Why this is happen? Is I miss something?

your navbar is inside your data-page
you switch to index2 and all page change.
let navbar outside -> view-main -> navbar and then the data-page
sorry my bad english.

Show/Hide section with navbar made with jquery

I'm creating a single page site. I have multiple "pages" organized in between <section> tags. I wrote some jQuery to hide all the sections except the first one. My issue is i'm trying to make a dynamic navigation that will show the section based on the data-index connection.
HTML:
<html>
<head>
<title>Title</title>
</head>
<meta name="viewport" content="width=device-width">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
<!-- Side Menu -->
<div class="container-fluid topheader">
<h1 class="text-center">Page 1</h1>
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<!-- /Side Menu -->
<section>
<p class="nextbutton">Next</p>
<p class="backbutton">Back</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Test</h1>
</div>
</div>
</div>
</section>
<section>
<p class="nextbutton">Next</p>
<p class="backbutton">Back</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Test 2</h1>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6" id="circlenav">
<p>Nav</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Title</h3>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script src="script.js"></script>
</body>
</html>
$('section').each(function(i){
$(this).attr('data-index', i+1);
});
$('section').each(function(i,v)
{
if(i < $('section').length) {
var nav = $('<li data-index="'+(i+1) + '">' + ($(this).children().attr('name'))+''+'</li>');
$('#circlenav').append(nav);
}
});
$('section').hide();
$('section[data-index="1"]').show();

Categories

Resources