I have a piece of jquery code which load a file as
$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");
Signup.php contains
<?php include_once("../libs/php_header/php_header.php"); ?>
<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>
<script>
$('.s_umodal')
.modal('show');
</script>
The problem is, I can call the modal box and it shows up. but next time I click on the trigger button (button to show modal) it display another one even though I have closed the previous one. so now I am left with two modal boxes. and if I click multiple times i will be left with multiple modal boxes. I am using Semantic-UI.
The problem with your implementation is that every time you call $('.data_container').load(base_path+"sign_up/signup.php?trigger_id=random"); you are creating a new dom element with the div you are fetching from that ajax call. $('.s_umodal').modal('show'); is then showing all of the modal boxes returned from the server.
Without restructuring your code significantly, One approach is to not keep fetching the content of the div over and over again. The <div> will be a part of the main html that contains data_container. Your Ajax call can return the script that shows the dialog box.
HTML:
<div class="data_container"></div>
<div class="ui modal s_umodal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on left or an icon
</div>
<div class="description">
A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>
Your Ajax call could be returning:
<script>
$('.s_umodal').modal('show');
</script>
Your call to load the content could remain the same.
$(".data_container").load(base_path+"sign_up/signup.php?trigger_id=random");
If you are up for a significant change however, You can try to use JSON web services instead of returning <script>.
Related
I am creating a project on PHP. But I have a problem. I want to pass some values from a section to another section. For example: In first section I am showing all products, and second section I am showing product details. When I click a product on first section, products values should pass second section. I am sharing my codes. Thanks
First Section
<section class="section pb-60 sm-pt-90">
<!-- Portfolio Items -->
<div id="portfolio-gallery" class="portfolio-container isotope-container portfolio-gallery row animated mfp-gallery" data-animation="fadeInUp" data-animation-delay="1200">
<article class="portfolio-item isotope-item col-md-4 col-sm-6 tasarim">
<div class="project-container">
<a href="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" data-size="1080x1440" class="portfolio-gallery__img--main">
<img src="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" alt="" style="width:360px; height:256px;">
<div class="overlay">
<div class="overlay-wrapper">
<div class="overlay-inner background-dark-5 opacity-70"></div>
</div>
</div>
</a>
<div class="project-details">
<h4 class="project-title heading-uppercase">Yeni Proje Mesela</h4>
</div>
</div>
</article>
Second Section
<div id="detay" class="ed-slide">
<div class="slide-container">
<div class="slide-content">
<section class="section sm-pt-0">
<div class="container">
<h2 class="text-white text-center animated" data-animation="fadeInDown"><!-- Project Title --></h2>
<div class="divider divider-alt divider-center divider-light animated" data-animation="fadeInDown" data-animation-delay="300"><span></span></div>
<p class="lead text-white mb-50 text-center animated" data-animation="fadeInDown" data-animation-delay="600"><!-- Project Info --></p>
<!-- Project Images etc. -->
</div>
</section>
</div>
</div>
</div>
You can make that using 2 ways:
-First way: when clicking on a product, you reload the page, and you pass the id in the url, and you display the data in the other section.
-Second way(Best way): via jquery for example, when clicking on a product, you load the data for this product and you display it in the other section.
I solved my problem with jQuery. I am sharing jQuery codes.
$(".details").click(function(){
var proje_baslik = $("input[name=proje_baslik]").val();
var proje_aciklama = $("input[name=proje_aciklama]").val();
var proje_url = $("input[name=proje_url]").val();
var proje_fiyat = $("input[name=proje_fiyat]").val();
var proje_resim = $("input[name=proje_resim]").val();
$("#detay .proje_baslik").html(proje_baslik);
$("#detay .proje_aciklama").html(proje_aciklama);
window.location.href = "http://localhost:81/Projeler/kodaktuelOnePage/#detay";});
Thanks for all comments
I would like to get the html code of a texteditor.
I use this texteditor http://adminbootstrap.com/wb/right/0.3.0/texteditor.html .
I've a form with the texteditor inside it but when I would like to get the html code with:
$request->input('texteditor');
It doesn't work and whereas I gave a name to the texteditor,
What is going wrong?
My view code:
<form>
<div class="container-fluid half-padding">
<div class="pages pages_dashboard">
<div class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Contenu de l'actualitée</h3>
</div>
<div class="template template_texteditor">
<div class="summernote"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
And
<div class='summernote'></div>
dynamically creating other div and the html code is contained in
<div class='note-editable panel-body' name='texteditor'></div>
EDIT 1
Another way :
$('.summernote').summernote('code');
to get the entire html code of summernote texteditor
You currently have no textarea form field that is being sent back to the server that contains the wanted content.
The simple thing would be to change
<div class='note-editable panel-body' name='texteditor'></div>
to
<textarea class='note-editable panel-body' name='texteditor'></textarea>
or run some javascript on form submit to add this as post['textarea'] from the TEXT of the div content
The GOAL:
Click of a “next slide” button refreshes / replaces <div> content with new content from a different php file. Each slide is its own php file. This is for an online course I’m building. Each time the button is clicked the <div> existing content is replaced by new content from the next slide (php file) in the series. I also want to build a back button to go to the previous slide, but I’m not at this point yet.
The PROBLEM:
I’m currently trying to use jquery/ajax. The button works (refreshes the <div> with the new slide content) in the first two slides, but then does not work on the third slide. I placed the button on each slide (prefer it this way). This may be one of the problems. I thought another issue may have to do with the file path for the page variable. I'm also wondering if the problem has to do with the fact that the home page only “includes” the other files in Div’s. Like this:
<div id="header">
<?php include 'pf_header.php'; ?>
</div>
<div id="menu">
<?php include 'pf_menu.php'; ?>
</div>
<div id="content">
<?php include 'pf_welcome.php'; ?>
</div>
<div id="footer">
<?php include 'pf_footer.php'; ?>
</div>
All of my code is below:
Script.js
$(document).ready(function() {
$(".slide").on("click", function(e){
$(".content").load($(this).attr("page"));
});
});
Slide 1 (button works)
<div class="content">
<div id="main">
<input type="button" value="NEXT" id="nextbtn" class="slide" page="pf_instructions.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
Slide 2 (button works)
<div class="content">
<div id="main">
<p>INSTRUCTIONS</p>
<p>INSTRUCTIONS</p>
<input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_introduction.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
Slide 3 (button DOES NOT work)
<div class="content">
<div id="main">
<p></p>
<input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_quiz.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
Unfortunately I won't be able to describe my issue without a visit to my site. DadGab.com.
I have a 'featured slider' col-md-8 with a sidebar to the right. It appears there is some padding or spacing set somewhere and I am unable to find it. I've checked all theme files, style.php. All I am trying to do is move the sidebar on the right side to the top of the page. The empty space did used to be a col-md-4 container which the coding has since been removed.
If I remove the featured slider code from the main page, the 'latest' posts as well as the menu do move to the top of the screen without the padding issue.
Any help would be greatly appreciated.
you have the following structure
<div class="col-md-8"></div>
<div class="clear"></div>
<div class="col-md-8"></div>
<div class="col-md-4"></div>
if i understand you corectly you should have
<div class="col-md-8"></div>
<div class="col-md-4"></div>
so join the code from both .col-md-8 containers, remove the div with class "clear" and it should be OK. This is all done in template homepage.php
You have some problems in your layout logic. You need to think about the way columns and rows work.
You should have a left column (col-md-8) and a sidebar column (col-md-4) and they should be adjacent. The left column should contain ALL of the left content.
Here's what you have:
<div class="row">
<div class="col-md-8">
<!-- featured -->
</div>
<div class="clear"><!-- SEPARATION --></div>
<div class="col-md-8">
<!-- REAST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!--
SIDEBAR
You want this next to the left column.
But it's not adjacent!
-->
</div>
</div>
Here's what you want
<div class="row">
<div class="col-md-8">
<!-- FEATURED -->
<!-- REST OF LEFT COLUMN -->
</div>
<div class="col-md-4">
<!-- RIGHT SIDEBAR -->
</div>
</div>
Your current scenario is following
<div class="col-md-8">
featured slider
</div>
<div class="col-md-8">
content
</div>
<div class="col-md-4">
sidebar
</div>
Change it to following
<div class="col-md-8">
featured slider
content
</div>
<div class="col-md-4">
sidebar
</div>
Please let me know if issue is still there :)
After your div "col-md-8" is coming a clearfix. Just creat a "col-md-4" after "col-md-8".
I already tested here, just do it.
Inside the tags
<div class="container"><div class="row">
rearrange the order, from:
<div class="col-md-8"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
to:
<div class="col-md-8"> ... </div>
<div class="col-md-4"> ... </div>
<div class="clear"></div>
<div class="col-md-8"> ... </div>
In addition, consider if you really want to keep the div that clears out your floats:
<div class="clear"></div>
If not, comment it out, like so:
<!-- <div class="clear"></div> -->
This indeed moves up your sidebar to the position you want. However, I suspect you will want the last div (of class col-md-8) to be positioned higher. If so, it sounds as if you will need to create two columns inside the row (the div of class row).
I have one query. Through while loop I am displaying three random songs from database and displaying them but I don't want to display all three.
When users click on the first song play icon it starts playing and after it finishes first song it automatically goes to second song and after second song completes it goes to third song.
But I want to display only one block which is playing for example first block will be displayed and when users click on first it will start playing but when first completes it should scroll up and second song which is playing should be visible to visitor.
Here is my php code:
$res6411 = sql_query("SELECT * from `".tb()."stories` where app='music' order by rand() desc limit 3");
while($row6411 = sql_fetch_array($res6411)) {
$outputmusic .= ' <div id="playlist"> <div href="'.$row6411['var1'].'" style="width: 520px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title">'.$row6411['title'].'</div>
</div>
<div class="player inactive"></div>
</div> </div>
here is css
b{color:#555;font-weight:bold}.duration{font-size:10px;color:#777}.btn.play{width:16px;height:17px;background-image:url(i/play.gif);display:inline-block}.btn.pause{width:16px;height:17px;background-image:url(i/pause.gif?2)}.btn.paused{width:16px;height:17px;background-image:url(i/play.gif?3);display:inline-block}div.player{width:520px;height:14px;margin-top:5px;padding-left:20px}div.player.inactive{margin-top:0px;margin-bottom:0;border-top:dashed 0px #555}.item .title{-vertical-align:middle}.item .btn{display:inline;float:left;margin-right:5px;cursor:pointer}
Here is output from firebug.
It displays three blocks. I want to display only playing song and when first song finishes playing it automatically goes to second that time first should scroll up and second song should display
<div id="playlist" class="playlist1"> <div class="item" style="width: 520px;" href="uploads/userfiles/201206/1110_27_aslha.[Songs.PK]Blue-05-BlueTheme.mp3">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title">Blue Theme</div>
</div>
<div class="player inactive"></div>
</div><div class="item current" style="width: 520px;" href="uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3">
<div>
<div class="fr duration"></div>
<div class="btn pause"></div>
<div class="title">Chale Chalo</div>
</div>
<div class="player"><embed width="380" height="5" flashvars="url=uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3&id=playlist1&backgroundColor=16777215&volumeBarWidth=40&progressBarWidth=320&barSpace=20&volumeBarColor=5592405&volumeBarHeight=1&volumeSliderWidth=10&volumeSliderHeight=5&volumeSliderColor=5592405&progressBarHeight=1&progressSliderWidth=10&progressSliderHeight=5&progressSliderColor=5592405&progressBarColor=10066329&bufferColor=5592405" allowscriptaccess="sameDomain" swliveconnect="true" quality="high" name="playerplaylist1" id="playerplaylist1" style="undefined" src="swf/drplayer.swf" type="application/x-shockwave-flash" wmode="transparent"></div>
</div><div class="item" style="width: 520px;" href="uploads/userfiles/201206/117_49_6l7ag.01KahonaKaho-AmirJama.mp3">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title">Kaho na Kaho - murder</div>
</div>
<div class="player inactive"></div>
</div></div>
It seems you're already setting a "current" css class on the currently playing item. You can leverage this by just animating the divs based on this class. If you want all inactive items to be invisible, do something like this.
In your CSS:
.item{display:none;}
In your jquery:
//When doc is ready
$(function(){
$('.item').slideUp();
$('.item.current').slideDown();
});
//You can set a speed/duration for this animation. See more info here: http://api.jquery.com/slideDown/
Make sure you reference jquery in your head as well. You can link to this from Google: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js