I am making a music website. i have installed a audio player in a div just above the footer. but the problem is that whenever i moved to the next page, song stops playing. How can i overcome this situation. I am working on this from a long time but haven't succeeded yet.
Someone has suggested me working though i frames but the other one said its not a good option.
What shall i do?
This is something really important for me.
I would be really helpful if someone tell me the quick solution for it.
thanks
shail
Solution One: Use AJAX
The Javascript library jQuery facilitates asynchronous requests to your content.
For instance, after including the necessary .js files, you can use:
$("#SampleLink").click(function() {
$.ajax({
url : 'TargetPage.php',
success: function(data){
$('#MainBodyContentDIV').html(data);
}
});
});
to load the target page's HTML into the DIV with ID MainBodyContentDIV when a link with ID SampleLink is clicked.
This solution requires you to use Javascript and jQuery, and so comes with all the cons (and pros!) of using them.
I suggest you to do some reading (if you haven't already) on these before making any serious changes to your site.
For example, you will have to enclose the code above within a function and run it via onClick events, either through jQuery entirely, or through the HTML attribute (which is also named onClick).
This solution will cut down the page refreshes that interrupt your music.
Solution Two: Use an iFrame Anyway
If appropriately styled, this won't be a visual issue.
Here's a link to a question about the use of iFrames.
I might be wrong, but I believe that the simplest way for you to work around this problem is to use an iFrame.
You asked so you shall receive. By the way, this is by no means efficient or secure. It is just meant to help you by being a reference. I included a YouTube video to replicate the music player.
Credit is do where do, Thanks Thauwa!
Main.php
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:arial;
margin:0px;
}
ul{
margin:0px;
}
a{
text-decoration:underline;
cursor:pointer;
}
h3{
margin:0px;
float:left;
}
#category{
width:980px;
margin:0px auto;
background-color:#eee;
padding:30px 0px;
}
#songs{
width:980px;
margin:0px auto;
background-color:#eee;
padding:30px 0px;
}
#musicplayer{
width:980px;
margin:0px auto;
background-color:#ccc;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function cate(page){
$.ajax({
url : page,
success: function(data){
$('#songs').html(data);
}
});
}
</script>
</head>
<body>
<div id="category">
<h1>Categories</h1>
<ul>
<li><a onclick="cate('cat1.php')">Category 1</a></li>
<li><a onclick="cate('cat2.php')">Category 2</a></li>
<li><a onclick="cate('cat3.php')">Category 3</a></li>
</ul>
</div>
<div id="songs"></div>
<div id="musicplayer">
<h3>Music Player</h3>
<iframe width="560" height="315" src="//www.youtube.com/embed/uiUAq4aVTjY" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
cat1.php
<h2>Songs</h2>
<ol>
<li>Category 1 - Song 1</li>
<li>Category 1 - Song 2</li>
</ol>
cat2.php
<h2>Songs</h2>
<ol>
<li>Category 2 - Song 1</li>
<li>Category 2 - Song 2</li>
</ol>
cat3.php
<h2>Songs</h2>
<ol>
<li>Category 3 - Song 1</li>
<li>Category 3 - Song 2</li>
</ol>
Related
hi..i have made this panel but tagged red color is space...i cannot remove this space from this page .
or it will be suitable for if i can set a banner.
below code is for reference...
</head>
<body>
<div class="container">
<div><h2 style="background-color:#00CCCC" align="center" "height:50px" width="550px" >SMS Panel</h2></div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" style="background-color:#FFCCFF">
<li class="active">Subscriber info and message</li>
<li class="dropdown">
Home
</li>
<li>Show subscriber</li>
<li>unknown menu</li>
</ul>
It is difficult to tell what is the exact problem without looking at the complete code. I will take a stab on it. It might be happening because you are not doing CSS reset for the panel. Many HTML elements have non zero margin by default. You can read more about CSS reset here.
To fix this issue you can give appropriate negative margin-top to the element right below the panel. It will have problems in IE7 and older browsers but will work in all modern browsers. To find the actual root cause of the issue you need to inspect the panel element in Chrome inspector or Firebug and need to check if there is any margin or padding either for the panel or the element right below it.
Update:
As per the given fiddle you need to add the following rule
h2, ul {
margin: 0;
}
Updated fiddle link
Your h2 tag has a margin on the bottom of about 5 or 10px, if you set the margin on the bottom to 0 it will remove the space.
You didnt use a <div class ="row"> tot wrap up your layout. Certain styles are only applied when you use the row div
Try this,
Replace this line of code
<div class="col-sm-2">
to
<div class="col-sm-2" style="margin: -20px 0px 0px ! important;">
i.e according to your code : http://jsfiddle.net/g2khLdtb/1/ you have posted on above comment
I'm really new to coding and I'm getting stuck on a blank lines issue. I've spent two days researching articles on blank lines, white space, etc., and I'm not finding anything that addresses this particular problem.
I have PHP code that is grabbing the contents of a file in my directory. I output these variables on an HTML page and I have these items scrolling vertically. Basically, it's a vertical news ticker. But I'm encountering irregular results. In IE11 everything works perfectly. However, in IE9 (where the end users will be viewing the page), the combination of lists with echoed PHP variables creates extra lines between each "li". So, instead of 5 "articles", I have 9.
Normally I wouldn't care about extra spaces, but the news ticker is treating the extra lines like a "news" item and will pause for the user to read that blank line. This seems to have something to do with calling php variables via a "ul", but I cannot find anything to remove these extra lines. Has anyone encountered this? Or do you have an idea of what I can do to resolve?
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><?php echo $par1;?></li>
<li><?php echo $par2;?></li>
<li><?php echo $par3;?></li>
<li><?php echo $par4;?></li>
<li><?php echo $par5;?></li>
</ul>
Code from Source View:
<!DOCTYPE html>
<html>
<head>
<style>
ul#ticker{
width:700px;
height:200px;
}
ul#ticker li{
font-family:Verdana;
font-weight:bold;
font-size:14px;
text-align:center;
width:700px;
height:200px;
margin:0px;
padding:0px;
border:0px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<span style="float:left; left:10px; position:absolute; width:125px; text-align:right;"><b>Current Events:</b></span>
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/VfqbYKimwZE/index.html" target="_blank">Bulgaria tries to contain bank run</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/EqRCj13Dabw/index.html" target="_blank">GM offers victims more than $1 million</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/g_ws27zfMkg/index.html" target="_blank">Stock market flirts with new records</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/iIm8fzJ9rWM/index.html" target="_blank">Enough with Millennials. Here's what Gen X thinks</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/x1GNhn8SwnM/index.html" target="_blank">Consumer Reports rates some Graco strollers "don't buy"</li>
</ul>
</div>
</body>
</html>
It is pretty hard to say from your description. I would suggest perhaps loading the page in IE9, then viewing the source (and posting it here if you don't see the issue).
Also,
in IE9 (where the end users will be viewing the page)
Are you for real?
http://codepad.viper-7.com/lw0VuN
here is a fiddle,showing it works. most probably one of your $par variables is not defined. best way to avoid this is to make an array and use a foreach http://www.php.net/manual/en/control-structures.foreach.php , or to check if it is defined like so:
<?php if($par1) echo "<li>".$par1."</li>"; ?>
and so on. Hope this helps!
I pulled up the developer tools in IE and found that, for some reason, the code as I had it written was creating a secondary list element for each news item. However, that list element contained only the "a" tag portion of my PHP variable so it wasn't truly blank, although it obviously appeared that way.
I'm not sure why this occurred, but I changed the "ul" to a div tag and the "li" to a p tag and now it's working the way I want it to. The only question that still leaves me with is why IE11 overlooked the list items that contained only the "a" tags, but IE 9 didn't. However, that's not a problem I need to answer today. Thank you all for your help!
I created a nav bar and was wondering how I could edit the CSS of it on wordpress and by that I mean calling the nav bars by it's name( from php to css I suppose).
As it's just two dots showing variables.
This is what I have as nav bar.(It works even though there are no variables there).
function register_my_menu(){
register_nav_menu('header-menu',__( 'Test' ));
}
add_action( 'init', 'register_my_menu');
I have no idea how I should edit this in the style.css as I am new to wordpress but have common knowledge on php/css yet this keeps me questioning all the time.
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>10</li>
<li>20</li>
</ul>
<style>
body ul:first-child {
background: red;
}
</style>
</body>
</html>
Been trying for over a day so I am now going to my last resort, posting here. I have a web site with the following code
style.css
#nav li a.active {
background: url('images/top-pages-button.png') 0 -80px;
}
#nav li ul li a:hover, #nav li ul li a.active {
color: #6dff6d;
font-weight: bold;
text-decoration: none;
background: url('images/pages-button.png') 0 -40px;
}
index.php Page
<ul id="nav">
<li>Top Pages
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</ul>
<iframe name="myframe" style="width: 100%; height: 100%; border: none; overflow: hidden;" src="default-page.php"></iframe>
test.php Page
Simple PHP file calling a page with some content/info/text.
The above code works, there is a default page that opens when the site is loaded and when you click on a link it opens the page on the iFrame correctly. HOWEVER, I have the following needs.
I would like to copy + paste a link to share with my friends to the
DIRECT page opened on the iframe. So for instance I would like to
send a link via email to
http://www.mydomain.com/index.php?page=page1.php OR something like
that, rather then tell them to visit mydomain.com and THEN click on
Page 1 under Top Pages.
Also, the site has multiple categories besides just "top pages" so I
would like for the page to highlight where the user is, category AND
link opened. So if I press on Page 1, for the category and for that
link to be "active" and then when I go to Page 2 for Page 1 link to
go back to default and Page 2 to be active and so on -based on my
style sheet.
The entire web site has three parts. Navigation on left, Content on middle, and Chat on right side. I need the chat to be static which is why I'm trying to do this. I do want to be able to send a friend or friends a link which opens that page directly rather than the site and instruct to click on X while the category and link is marked as "active" and change like so as necessary and keep the chat div static the entire time.
Let me know if this is possible with either JQUERY of PHP please. Thank you very much!
In index.php, just add some checks for $_GET['page'] - if that's what you want to use:
<li>Page 1</li>
<li>Page 2</li>
Similarly, for the iframe:
<iframe name="myframe" style="width: 100%; height: 100%; border: none; overflow: hidden;" src="<?= $_GET['page']; ?>"></iframe>
Remember to whitelist the pages allowed (otherwise the iframe will load anything):
if (isset($_GET['page'])) {
if (in_array($_GET['page'], array('page1.php', 'page2.php')) === false) { // not whitelisted
$_GET['page'] = 'default-page.php'; // revert to default
}
}
else {
$_GET['page'] = 'default-page.php'; // it isn't set
}
The above should go on the top of the page (or before $_GET['page'] appears for the first time).
I want to have a semi trasparent hover effect on my social icons but cant figure it out.
Here is my header.php:
<div align = "right"><img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
I see alot off people saying to edit css but i cant find this in my css
here is my website http://ideviceguys.com
You need a hook for your css code.
Give your div an id or class.
Try adding class="socialIcons to your main div.
<div class="socialIcons">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
Then add this little nugget to your css.
.socialIcons a:hover {
opacity:0.7; filter:alpha(opacity=40); /* Damn MS and IE8 and earlier */
}
That should give your icons 30% transparency.
Consider what the others say around here. They are much smarter than I am.
You have to define it in css. First give your menu an id or class so your css can target it in a non-generic way.
<div class="nav">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
in css:
.nav{
float:right;
}
.nav a{
display:block;
float:left;
margin-right:10px;
}
.nav a:hover{
box-shadow: 0px 0px 10px #ff6600;
}
Obviously this is just an example. I have no idea what your actual design calls for. I am merely showing you that a parent element with a class of nav can select the a tags within and assign an effect on hover. This is trivial, intro level css. A more specific response will require a more detailed question.