1
I have a div that enlarges after the user clicks on a link (+). I’ll get the contents from a local file that contains printed paragraphs. In this paragraph consists of a link (-) that returns the original div. For this you are using the following script:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.more').click(function(){
$('#'+$(this).attr('href')).load('content-box_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.reset').click(function(){
$('#'+$(this).attr('href')).load('reset_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
The link (+) has the class "more", and the (-) a class "reset". The first link works exactly as I wanted, while the second does not recognize the link class (-)(I don’t know if it is because of this coming from an external file and how the page does not refresh when printing.) and just tries to redirect to href which results in error. I’m not much into JS and any help was appreciated!
UPDATED HTML:
<
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="header">
<div id="trans-bar" style="background-image: url('img/transparencia.png');">
<div class="trans-center">
<center><img src="img/logo-sysdevmobilecomputing.png" style="width: 300px; height: 40px"></center>
</div>
<div class="trans-right">
<div class="trans-lang">
<a class="trans-link" href="index_en.html" style="color: whitesmoke;">EN</a><strong> | </strong><a class="trans-link" href="index.html" >PT</a>
</div>
</div>
</div>
<section class="section-white">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner-kalipso.png" alt="...">
</div>
<div class="item">
<img src="img/banner-mss.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner-apps.jpg" alt="...">
</div>
</div>
</div>
</div>
</section>
<div id="header-box">
<p>Kalipso is a fast and powerful mobile application generator for Microsoft OS (Mobile, CE, Seven, 8 PRO and Windows 10) and Android.</p>
<br>
<a id="botao-head">Visit Website</a>
</div>
</div>
</header>
<div id="content">
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevmss.png">
</div>
<div id="borderLeft"></div>
<div class="content-box-text" id="sales" style="margin-top: 25px;">
<p>Mobile sales System – Mobile application for Pre- Sales and Auto sales, distribution and tecnical services. Available to PDA and Tablet.<a class="more" href="sales" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-um">Visit Website</a></center>
</div>
</div>
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevkalipso.png">
</div>
<div id="borderLeft"></div>
<div class="content-box-text" id="kalipso" style="margin-top: 25px;">
<p>Kalipso is a fast and powerful mobile application generator for Microsoft OS (Mobile, CE, Seven, 8 PRO and Windows 10) and Android.<a class="more" href="kalipso" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-dois">Visit Website</a></center>
</div>
</div>
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevapps.png">
</div>
<div class="content-box-text" id="apps" style="margin-top: 25px;">
<p>Sysdev is a company focused on developing mobile solutions in the techno-industry area.<a class="more" href="apps" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-tres">Visit Website</a></center>
</div>
</div>
<div id="message-box" style="background-image: url('img/banner-sobre.jpg')">
<div class="msg-links">
<ul>
<li>
<a href="sobre" id="sobre-link">About</a>
</li>
<li>
<a href="visao" id="visao-link">Vision</a>
</li>
<li>
<a href="missao" id="missao-link">Mission</a>
</li>
<li>
<a href="valores" id="valores-link">Values</a>
</li>
</ul>
</div>
<section id="content-msg">
<div id="sobre">
<div class="msg-header">
<h1>ABOUT <strong style="color:#00a6d4;">SYSDEV</strong></h1>
</div>
<style>
#sobre-link{
color:#00a6d4;
}
</style>
<div class="msg-content">
<p>It's a software company specialized in the development of mobility solutions in the techno-industrial area.</p>
<p>With an expert software development and programming team, Sysdev works constantly to provide integrated solutions, improving the process and effectiveness of all mobile solutions used by companies which in turn increases their profitability and efficiency.</p>
</div>
</div>
</section>
</div>
</div>
<div id="footer">
<footer>
<div id="footer-info">
<div class="info">
<center><img id="address" src="img/address.png"><h3>Address</h3></center>
<p>Rua Dom Manuel Barbuda e Vasconcelos N31/33</p>
<p>Urbanização Glicínias</p>
<p>3810-498 AVEIRO, Portugal</p>
</div>
<div id="contact" class="info">
<center><img id="phone" src="img/phone.png"><h3>Contacts</h3></center>
<p>Main Line: +351 234 188 027</p>
<p>Sales Line: +351 234 024 457</p>
<p>Support Line: +351 234 098 189</p>
<p>Fax: +351 234 188 400</p>
</div>
<div class="info">
<center><img id="mail" src="img/mail.png"><h3>Emails</h3></center>
<p>Sales: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Support: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div id="footer-links">
<div id="sysdev" class="links">
<ul>
<li><a href="https://sysdevmss.com/pt">SYSDEV MSS</a></li>
<li><a href="https://sysdevkalipso.com/en">SYSDEV KALIPSO</a></li>
<li><a href="https://sysdevapps.com/pt">SYSDEV APPS</a></li>
<li><a href="mailto:[email protected]">CONTACT US</a></li>
</ul>
</div>
<div id="social" class="links">
<ul>
<li><a href="https://www.facebook.com/SysdevMobile/"><img src="img/facebook.jpg"></a></li>
<li><a href="https://www.youtube.com/user/MrktSysdev"><img src="img/youtube.jpg"></a></li>
<li><a href="https://www.linkedin.com/company/811286?trk=tyah&trkInfo=tarId%3A1413147327921%2Ctas%3Asysdev%2Cidx%3A2-1-4"><img src="img/linkedin.jpg"></a></li>
<li><a href="https://twitter.com/Sysdevmobile"><img src="img/twitter.jpg"></a></li>
</ul>
</div>
<div id="rights" class="links">
<ul>
<li style="margin-right: 10px;">@ 2017 SYSDEV</li>
<li>POWERED BY</li>
<li><img src="img/logo-goweb.png"></li>
</ul>
</div>
</div>
</footer>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.msg-links ul li a').click(function(){
$('#content-msg').load('messages_en.phtml #' + $(this).attr('href'));
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.more').click(function(){
$('#'+$(this).attr('href')).load('content-box_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.reset').click(function(){
$('#'+$(this).attr('href')).load('reset_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
</body>
</html>
some html so we can test?
– user60252
I’ve updated the question. Thanks for your help!
– Bruno Monteiro
The paragraphs are in the div "content-box-text"
– Bruno Monteiro
I managed to find a way to force the script to read via the "onclick" attribute of the link. But it makes you have to refresh the page that makes this solution useless.
– Bruno Monteiro